I just joined this platform and I'm playing around with creating an overlay that slides up with text over an image. However, I'm encountering some issues with the positioning of the overlay. This is part of a responsive gallery where all images have the same functionality.
<div class="wrapper">
<h1>Flexbox Image Gallery</h1>
<div class="img-area">
<div class="container">
<div class="single-img"><img src="img/1.jpg" alt=""></div>
<div class="overlay">
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem et tortor consequat id porta nibh. Ut tellus elementum sagittis vitae et leo duis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Nam at lectus urna dui...
Below is the CSS code for it:
.container {
position: relative;
width: auto;
}
.wrapper h1 {
text-align: center;
font-size: 30px;
}
.img-area{
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}
.single-img{
padding: 0 20px 20px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
overflow: scroll;
}
.text {
color: white;
font-size: 16px;
position: absolute;
top: 100%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
...
The objective is to have the text displayed at the top of the overlay with the ability to scroll down. The image dimensions are set at 500x500 pixels, and there should be some spacing between the edges of the text.