Currently, I am facing an issue while trying to implement a hover effect for an image block. For some reason, the transition is not functioning as expected and I am at a loss as to why this might be occurring.
Here is the snippet of HTML code that I am working with:
<div class="area">
<div class="mask"></div>
<img src="http://placehold.it/300x300">
</div>
Below is the CSS code that I have used (although the cursor works fine, the transitions seem to be non-responsive):
.area {
width: 300px;
display: block;
}
.area:hover .mask{
display: block;
cursor: pointer;
transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.mask{
position: absolute;
background-color: rgba(226,23,37,0.9);
width: 300px;
height: 300px;
display: none;
}