.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; } }