Introduction
Today we are going to create an awesome image showcase gallery with the use of HTML and CSS. Today’s project is about how we can make a gallery with simple photos and add more favorite photos to this gallery. In this showcase, we will make the best appearance of images by hovering over a particular image.
HTML
First, we will create the structure of the Character Showcase Gallery with the help of HTML. In this, we will first make a parent div, and in this div, we will add images with five image tags, and we will also give the title of a particular image in an image tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LayakCoder</title> </head> <body> <div class="container"> <div class="box box-1" style="--img: url(https://m.media-amazon.com/images/I/71Cww348R-L._AC_UF1000,1000_QL80_.jpg);" data-text="Cristiano Ronaldo"></div> <div class="box box-2" style="--img: url(https://m.media-amazon.com/images/M/MV5BM2E0NjA5MDktYmUxOC00NWUzLWJlNzMtZmJlNjU1ODZiMjgyXkEyXkFqcGdeQXVyMTY3ODkyNDkz._V1_.jpg);" data-text="Taylor Swift"></div> <div class="box box-3" style="--img: url(https://i1.wp.com/timesofindia.indiatimes.com/photo/104992471/104992471.jpg?strip=all);" data-text="Virat Kohli"></div> <div class="box box-4" style="--img: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg/1200px-Elon_Musk_Royal_Society_%28crop2%29.jpg);" data-text="Elon Musk"></div> <div class="box box-5" style="--img: url(https://wwd.com/wp-content/uploads/2023/12/Selena-Gomez-for-Beauty-Inc-05.jpg?w=800);" data-text="Selena Gomez"></div> </div> </body> </html>
CSS
After making the structure of the Character Showcase Gallery, we will design this gallery through CSS (an external stylesheet attached to the HTML file). In CSS we will first give the flex property to make all the images in one horizontal line and then have to centre the div of screen. We will use a filter to make the images black and white in the default case. We will give the full height and less width in the beginning to all the images, and when the user hovers on that particular image, the width of only those images will increase with the original color of the image, and the name of the character will also appear while hovering, and the rest of the images will remain the same as set in the default case.
@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Figtree", sans-serif; } body { display: grid; place-content: center; min-height: 100vh; background: #000000; } .container { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 1em; width: 800px; height: 500px; transition: all 400ms; } .container:hover .box { filter: grayscale(100%) opacity(24%); } .box { position: relative; background: var(--img) center center; background-size: cover; transition: all 400ms; display: flex; justify-content: center; align-items: center; } .container .box:hover { filter: grayscale(0%) opacity(100%); } .container:has(.box-1:hover) { grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } .container:has(.box-2:hover) { grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } .container:has(.box-3:hover) { grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } .container:has(.box-4:hover) { grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } .container:has(.box-5:hover) { grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } .box:nth-child(odd) { transform: translateY(-16px); } .box:nth-child(even) { transform: translateY(16px); } .box::after { content: attr(data-text); position: absolute; bottom: 20px; background: #000; color: #fff; padding: 10px 10px 10px 14px; letter-spacing: 4px; text-transform: uppercase; transform: translateY(60px); opacity: 0; transition: all 400ms; } .box:hover::after { transform: translateY(0); opacity: 1; transition-delay: 400ms; }
Finally, we made the Image Showcase Gallery with the use of HTML and CSS by following simple steps. This showcase will help you make this type of project with your own creativity by taking ideas from here.
Click on the button below to download the source code.
For a more explanation of the code, click on the video link given below.
Press the download button to download the source code
1 KB