On Image Hover Display text inside a box above image - css

Question

I want text on image hover just like in this website. Using CSS3
https://addapinch.com/

Answer 1

You can try with this (just adopt the color and the divs)
Here is the HTML:
<div class="container">
<div class="row">
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
<div class="col-md-3 row_cont">
<img class="image_box" src="path_to_the_image" id="image"/>
<div id="overlay">
desired text
</div>
</div>
</div>
</div>
Here is the CSS:
.row_cont {
position:relative;
width:95%;
height:240px;
margin-bottom: 20px;
}
.row_cont {
position:relative;
width:95%;
height:240px;
margin-bottom: 20px;
}
#image {
position:absolute;
width:95%;
height:240px;
/* background:black; */
}
#overlay {
position:absolute;
width:95%;
height:240px;
background: #fff;
opacity: 0;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
#overlay:hover {
opacity: .95;
box-shadow: 0px 0px 30px 3px #000;
}
a.link_hover {
position: relative;
top: 45%;
left: 13%;
font-size: 26px;
font-weight: 600;
text-transform: uppercase;
color: rgba(2, 103, 193, .7);
text-decoration: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
a.link_hover:hover {
color: rgba(2, 103, 193, 1);
}
.image_box:hover {
-ms-filter: blur(3px)!important;
filter: blur(3px)!important;
cursor: pointer;
}
Let me know if it is this was helpful