In the code snippets provided below, I am trying to achieve the design outlined in the image.
.stone-item{
width: 330px;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
position: relative;
margin: 0;
}
.stone-item img{
width: 330px;
height: 220px;
}
.stone-item .stone-content{
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
position: absolute;
bottom: -50%;
left: 0;
background: aqua;
}I am encountering an issue with this code. It seems not to be working as expected.
Desired output:
Before hover: Image link
After mouse hover: Image link