HTML
<p class="demo"></div><a class="readmore" href="http://codeconvey.com/css3-fade-in-animation-on-hover/">Find More Details Here</a>
</p>
<figure class="captionEffect" data-effect="fade-in">
<img src="http://placehold.it/120x90/" alt="">
<figcaption>
<h3>Cover Fade</h3>
<p>Lorem ipsum dolar.</p>
</figcaption>
</figure>
CSS
body{
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
font-weight: 400;
}
.captionEffect {
position: relative;
overflow: hidden;
width: 50%;
margin: 0 auto;
}
.captionEffect img {
width: 100%;
display: block;
-webkit-transition: 800ms;
-o-transition: 800ms;
transition: 800ms;
}
.captionEffect figcaption {
background: rgba(0,0,0,0.8);
color: white;
padding: .5rem;
position: absolute;
-webkit-transition: 800ms;
-o-transition: 800ms;
transition: 800ms;
width: 100%;
}
.captionEffect[data-effect="fade-in"] figcaption {
top: 0;
left: 0;
height: 100%;
opacity: 0;
}
.captionEffect[data-effect="fade-in"]:hover figcaption {
opacity: 1;
}
.captionEffect figcaption h2 {
margin: 0;
font-size: .875rem;
}
.captionEffect figcaption p {
margin: 0;
}
.demo {
font-family: 'Raleway', sans-serif;
color:#fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a{
font-family: 'Raleway', sans-serif;
color: #2ecc71;
}
1 Response