.categories {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.section img {
object-fit: cover;
border: solid red 1px;
transition: .5s ease;
}
.section {
position: relative;
vertical-align: middle;
}
.section p {
color: white;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
width: 90%;
margin: auto auto;
text-align: center;
}
.section:hover img{
opacity: 0.3;
}
.section:hover p{
opacity: 1;
}
@media only screen and (max-width: 600px) {
.categories {
color: white;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
}