I am attempting to create an animated image on hover. The desired outcome is similar to the one showcased here: Check it out (scroll to view the image "Our Team")
Essentially, I want a background where I can showcase information such as names and links just like in the referenced theme, but I'm struggling to achieve it.
Here's my current code:
<div class="row">
<div class="col-md-6">
<div class="picture">
<div class="photoapropos center-block">
<div class="info">
<img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
Additionally, here's my CSS styling:
.picture {
display: block;
opacity: 1;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
background: #FF8C00;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
If anyone could offer assistance, that would be greatly appreciated. This particular feature seemed straightforward to implement, so I'm unsure of what I might be overlooking?
Thank you for any guidance provided.