Code Box<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>
.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); }
<!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>