In this tutorial, we'll guide you through the process of creating an eye-catching character showcase gallery using HTML and CSS. The gallery will feature a grid layout with character images, hover effects, and character names appearing on hover.
HTML Structure
The HTML code defines the basic structure of the gallery, including the container for the character boxes and the individual character boxes themselves. Each character box has a class attribute that identifies it and a data-text attribute that stores the character's name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Character Showcase Gallery</title>
<style>
@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: #000;
}
.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;
}
</style>
</head>
<body>
<div class="container">
<div
class="box box-1"
style="--img: url(https://i.postimg.cc/sgBkfbtx/img-1.jpg)"
data-text="Renji"
></div>
<div
class="box box-2"
style="--img: url(https://i.postimg.cc/3RZ6bhDS/img-2.jpg)"
data-text="Sora"
></div>
<div
class="box box-3"
style="--img: url(https://i.postimg.cc/DZhHg0m4/img-3.jpg)"
data-text="Kaito"
></div>
<div
class="box box-4"
style="--img: url(https://i.postimg.cc/KjqWx5ft/img-4.jpg)"
data-text="Tsuki"
></div>
<div
class="box box-5"
style="--img: url(https://i.postimg.cc/nrcWyW4H/img-5.jpg)"
data-text="Mitsui"
></div>
</div>
</body>
</html>