I've been struggling to achieve the desired effect for quite some time now, putting in hours of effort without success.
Essentially, I am aiming to create a div that showcases an image. When the mouse hovers over the image, it should zoom in and fade out to reveal a blue background with a text description underneath.
I've managed to implement the zooming and fading effects, positioned the text within the div as intended, but I just can't seem to get it to appear below the image initially.
Despite trying different z-index values and opacities, the text always ends up on top of the image.
If anyone could provide guidance on resolving this issue, I would greatly appreciate it.
Below is my HTML and CSS code:
<div class="randomItem">
<div class="hidden_text">
Vintage Projects
<br>
Click to find out more
</div>
<a href="vintage.html">
<img src="img/vintage/rizla3.jpg" alt="Vintage Projects" class="randomImage">
</a>
</div>
.hidden_text {color: white;
font-size: 20px;
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
cursor: pointer;}
.randomItem {border:3px solid #ddd;
position:relative;
display:inline-block;
margin:0.79%;
overflow:hidden;
width:31%;
-webkit-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
background:#009fdf;}
.randomImage {display:block;
height:auto;
max-width:100%;
-webkit-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
opacity:1;}
.randomImage:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3); opacity:0;}
.randomItem:hover {border-color: #009fdf;}
Your assistance in resolving this matter would be of immense help.
Thank you