411 REFERENCE · Wikibooks
BTEC IT Unit 20 - Website Design/CSS/Hover Image
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Place text over images on hover
<head>
<style>
.hover_box,
.hover_box * {
box-sizing: border-box;
}
.hover_box {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hover_box img {
max-width: 100%;
}
.hover_box .hover_box-layer_bottom {
display: block;
}
.hover_box .hover_box-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
transition: all 0.4s ease-in-out 0s;
}
.hover_box:hover .hover_box-layer_top,
.hover_box.active .hover_box-layer_top {
opacity: 1;
}
.hover_box .hover_box-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="hover_box">
<img src="hawaii.jpg" alt="Mountains" class="hover_box-layer_bottom">
<div class="hover_box-layer_top">
<div class="hover_box-text"> This is a picture of Hawaii</div>
</div>
</div>
</body>