Step 1: Create a file gallery.html with the following content.
<!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="./gallery-styles.css" />
</head>
<body>
<div class="gallery">
<figure class="fig"><img /></figure>
<figure class="fig"><img /></figure>
<figure class="fig"><img /></figure>
<figure class="fig"><img /></figure>
<figure class="fig"><img /></figure>
<figure class="fig"><img /></figure>
</div>
</body>
</html>
Step 2: Create a file gallery-styles.css with the following content.
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
box-sizing: border-box;
}
.fig {
overflow: hidden;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
padding: 1.6rem;
}
img {
content: url("https://images.unsplash.com/photo-1585670210693
-e7fdd16b142e?ixlib=rb-1.2.1
&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8
&auto=format&fit=crop&w=387&q=80");
width: 100%;
height: 58rem;
background-size: cover;
transition: all 0.5s ease;
}
img:hover {
transform: scale(1.1);
}
NOTE: The above is available on my codepen link
https://codepen.io/ram-krishna-srinivas/pen/poaQYoR
Result:
No comments:
Post a Comment