If you're looking for a solution, this code snippet might be just what you need. And the best part? It's designed to be responsive!
The grid-wrapper and polaroid classes work together to make sure the grid layout adjusts to different screen sizes. If you want to add more images to the grid, simply adjust the width of the polaroid class and the grid-template-columns of the grid-wrapper class.
Within the container div, you'll find both an image and text. When you hover over the image, the opacity decreases while the text opacity increases. This hover effect is managed through the CSS. The 'middle' class ensures the text stays centered over the image.
.abtimg {
padding: 5px
}
.width {
width: 100%
}
.container {
position: relative;
width: auto;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.5;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #fff;
color: #000;
font-size: 16px;
padding: 16px 32px;
}
.ptr {
cursor: pointer;
}
a:hover {
color: #000;
text-decoration: none;
}
.font1 {
font-size: 2em;
text-align: center;
text-decoration: underline;
}
@media only screen and (min-width: 610px) {
.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
justify-items: center;
align-items: center;
padding-top: 4em;
padding-bottom: 3em;
}
.polaroid {
width: 25vw;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
background-color: #fff;
height: auto;
}
}
@media only screen and (max-width: 609px) {
.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(80vw, 1fr));
justify-items: center;
align-items: center;
padding-top: 4em;
padding-bottom: 3em;
}
.polaroid {
width: 80vw;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
background-color: #fff;
height: auto;
}
}
<div class="grid-wrapper">
<div class="polaroid">
<div class="container">
<img class="abtimg width image" src="images/1.jpg" alt="kwon eunbi">
<div class="middle">
<a href="#" class="font1"><div class="text ptr">kwon eunbi</div>
</a></div>
</div>
</div>
<div class="polaroid">
<div class="container">
<img class="abtimg width image" src="images/2.jpg" alt="miywaki sakura">
<div class="middle">
<a href="#" class="font1"><div class="text ptr">miywaki sakura</div>
</a></div>
</div>
</div>
<div class="polaroid">
<div class="container">
<img class="abtimg width image" src="images/3.jpg" alt="kang hyewon">
<div class="middle">
<a href="#" class="font1"><div class="text ptr">kang hyewon</div>
</a></div>
</div>
</div>
</div>