Bones' test page!!
Twin Peaks fan-site
X-files fan-site
/* Wrapper */
.example-image-gallery {
display: flex;
flex-wrap: wrap;
}
/* Items */
.example-image-gallery div {
box-sizing: border-box;
width: calc(25% - 10px);
margin: 5px;
border: 5px solid;
overflow: hidden;
position: relative;
}
/* Images */
.example-image-gallery div img {
transition: transform 0.5s ease;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Captions */
.example-image-gallery div span {
position: absolute;
bottom: 15px;
left: 0;
text-align: center;
width: 100%;
box-sizing: border-box;
background: white;
color: black;
padding: 5px 10px;
font-size: 20px;
opacity: 0;
transform: translateY(100px);
transition: transform 0.4s ease, opacity 0.5s ease;
}
/* Images on Hover */
.example-image-gallery div:hover img {
transform: scale(1.35) rotate(10deg);
}
/* Captions on Hover */
.example-image-gallery div:hover span {
opacity: 1;
transform: none;
}
/* Mobile */
@media (max-width: 800px) {
.example-image-gallery div {
width: calc(50% - 10px);
}
}