Code Box
1st code:go to post after type your content next move to html.'see where you images paste check after ' paste code this.2nd code
HTML 1
<div class="images-container"> <div class="image"> <img src="images/1.jpg" alt=""> <div class="description"> <h2>Title 1</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, repellat.</p> </div> </div> <div class="image"> <img src="images/2.jpg" alt=""> <div class="description"> <h2>Title 2</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, repellat.</p> </div> </div> </div>
2nd code:goto edit html after search crt+F
tag < /b:skin> just up(above) paste.3rd code
HTML 2
.images-container {
max-width: 700px;
height: 500px;
margin: 32px auto;
display: flex;
border: 2px solid #222;
}
.images-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 400ms;
}
.images-container .image {
position: relative;
overflow: hidden;
}
.images-container .description {
position: absolute;
bottom: -180px;
background: #222;
color: #fff;
padding: 8px 16px;
box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 400ms;
}
.images-container .description h2 {
color: #50ebff;
}
.images-container .image:hover .description {
opacity: 1;
bottom: 0;
}
.images-container .image:hover img {
transform: scale(1.1);
}
HTML 3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="images-container"> <div class="image"> <img src="images/1.jpg" alt=""> <div class="description"> <h2>Title 1</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, repellat.</p> </div> </div> <div class="image"> <img src="images/2.jpg" alt=""> <div class="description"> <h2>Title 2</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, repellat.</p> </div> </div> </div> </body> </html>
