I have successfully implemented the overlay effect on hover, but now I would like to enhance it with a smooth transition using CSS3. Unfortunately, I haven't been able to find a working solution online yet.
Let's take a look at the code!
My setup consists of a div containing an image only. On hovering over the image, it reveals a colored overlay along with two text elements.
<div class="item">
<img src="assets/images/blah.jpg" class="image">
<a class="overlay" href="#">
<h3 class="title">Some title</h3>
<div class="description">
<h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4>
</div>
</a>
</div>
In my CSS, I included the following -transition code:
.item {
position: relative;
background-color: white;
-webkit-transition: background-color 2s ease-in;
transition: background-color 2s ease-in;
}
.overlay {
background: white;
position: absolute;
display: none;
}
.item:hover .overlay{
display:block;
background-color: black;
}
Despite this, the transition doesn't seem to work as expected! Can someone lend me a hand?
Should I consider changing the -transition property to incorporate display or all ?
You can view the version with working :hover effect in this jsfiddle link, albeit without the animation.
Your help is greatly appreciated