Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
In this tutorial topic "How To Create A Complete Image Gallery Using HTML and CSS", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery: Character Gallery Hover Effects</title>
</head>
<body>
<div class="container">
<div class="box box1" style="--img: url(img1.jpg);" data-text="LINA"></div>
<div class="box box2" style="--img: url(img2.jpg);" data-text="CRYSTAL MAIDEN"></div>
<div class="box box3" style="--img: url(img3.jpg);" data-text="DROW RANGER"></div>
<div class="box box4" style="--img: url(img4.jpg);" data-text="WIND RUNNER"></div>
<div class="box box5" style="--img: url(img5.jpg);" data-text="VIRAN SPIRIT"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-content: center;
min-height: 100vh;
background: #000;
margin: 0;
font-family: "Roboto", sans-serif;
}
.container {
position: relative;
width: 800px;
height: 500px;
display: grid;
}
.box {
position: relative;
background: var(--img) center center;
background-size: cover;
transition: all 400ms;
display: flex;
justify-content: center;
}
.container {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 1em;
transition: all 400ms;
}
.container:hover .box {
filter: grayscale(100%) opacity(24%);
}
.container .box:hover {
filter: grayscale(0) opacity(1);
}
.container {
--layout1: 3fr 1fr 1fr 1fr 1fr;
--layout2: 1fr 3fr 1fr 1fr 1fr;
--layout3: 1fr 1fr 3fr 1fr 1fr;
--layout4: 1fr 1fr 1fr 3fr 1fr;
--layout5: 1fr 1fr 1fr 1fr 3fr;
&:has(.box1:hover) {
grid-template-columns: var(--layout1);
}
&:has(.box2:hover) {
grid-template-columns: var(--layout2);
}
&:has(.box3:hover) {
grid-template-columns: var(--layout3);
}
&:has(.box4:hover) {
grid-template-columns: var(--layout4);
}
&:has(.box5:hover) {
grid-template-columns: var(--layout5);
}
}
.box {
&:nth-child(odd) {
transform: translateY(-16px);
}
&:nth-child(even) {
transform: translateY(16px);
}
&::after {
content: attr(data-text);
position: absolute;
color: #fff;
background: #000;
bottom: 20px;
font-size: 0.8em;
padding: 10px 10px 10px 14px;
letter-spacing: 4px;
text-transform: uppercase;
transition: all 400ms;
transform: translateY(60px);
opacity: 0;
}
&:hover::after {
transform: translateY(0);
opacity: 1;
transition-delay: 200ms;
}
}
0 Comments
We are happy to hear from you.