.row-img {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.column-img {
position: relative;
padding: 10px;
box-sizing: border-box;
text-align: center;
}
.imagea {
width: 90%;
height: 90%;
transition: transform .5s, filter .5s;
}
.column-img:hover .imagea,
.column-img:focus-within .imagea {
transform: rotateY(180deg);
filter: brightness(50%);
z-index: 1;
} .text {
opacity: 0;
position: absolute;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.6); color: #fff;
padding: 8px 10px;
border-radius: 8px;
font-size: 16px;
transition: opacity .5s;
}
.column-img:hover .text,
.column-img:focus-within .text {
opacity: 1;
} .link-rotate {
color: #fff;
text-decoration: underline;
}
.link-rotate:hover,
.link-rotate:focus {
color: #FFD700;
} .column-img a:focus {
outline: 3px solid #FFD700;
outline-offset: 4px;
} @media (max-width:1615px) {
.row-img { grid-template-columns: repeat(3, 1fr); }
.imagea { width:100%; height:100%; }
}
@media (max-width:1411px) {
.row-img { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:770px) {
.row-img { grid-template-columns: repeat(1, 1fr); }
}