<body>
<div class="gallery-container">
<h2 class="gallery-heading">Supercars</h2>

<div class="images-container">
<div class="image">
<img src="images/1.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
in!
</div>
</div>

<div class="image">
<img src="images/2.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
in!
</div>
</div>

<div class="image">
<img src="images/3.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
in!
</div>
</div>

<div class="image">
<img src="images/4.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
in!
</div>
</div>

<div class="image">
<img src="images/5.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
in!
</div>
</div>

<div class="image">
<img src="images/6.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
in!
</div>
</div>
</div>
</div>
For CSS copy and past to your Blogspot site theme add CSS sections Here you go
.gallery-container {
font-family: "Roboto", sans-serif;
}
.gallery-container .gallery-heading {
font-size: 32px;
text-align: center;
color: #222;
text-transform: uppercase;
}
.images-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 16px;
}
.images-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 500ms;
}
.images-container .image {
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.images-container .image .description {
position: absolute;
bottom: -100px;
padding: 24px;
background: #222;
color: #eee;
line-height: 1.8;
font-size: 16px;
opacity: 0;
transition: 500ms;
}
.images-container .image:hover .description {
opacity: 1;
bottom: 0;
}
.images-container .image:hover img {
opacity: 0.5;
}
@media (max-width: 1200px) {
.images-container .image {
height: 240px;
}
}
@media (max-width: 1000px) {
.images-container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 800px) {
.images-container .image {
height: 200px;
}
}
@media (max-width: 650px) {
.images-container {
grid-template-columns: 1fr;
}
.images-container .image {
height: 300px;
}
}

Tags

Post a Comment

Please do not link comment any spam or drive spams content

Post a Comment

Please do not link comment any spam or drive spams content

Previous Post Next Post