When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here.
Below, you'll find the HTML and CSS code I've implemented for this effect. ================================================
.photo-album .common .details {
text-align: center;
position: absolute;
bottom: 15%;
left: 0;
right: 0;
transform: translateY(200%);
transition: .3s ease-in;
}
.photo-album .common .photo::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background: #00000086;
transform: translateY(100%);
transition: .3s ease-in;
z-index: 8;
}
.photo-album .common .photo:hover.photo::after {
transform: translateY(0);
}
.photo-album .common .photo:hover.details {
transform: translateY(0);
}
<section class="photo-album">
<div class="common">
<div class="photo">
<div class="border-top border"></div>
<div class="border-right border"></div>
<div class="border-bottom border"></div>
<div class="border-left border"></div>
<img src="./images/ayon.jpg" alt="">
</div>
<div class="details">
<h1>Ayon Jodder</h1>
<p>Student of Programming Hero</p>
</div>
<div class="overlay"></div>
</div>
</section>