https://caribou-tunny-2kwe.squarespace.com/work
I´ve achieved to code the hover effect. But the 0,5 transition only work in the entry. The out transition does not work with the 0,5 timing... Any solution?
My css code is:
.gallery-caption {
position: absolute;
top: 0;
left: 0;
/* You can replace the color here with a different color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.gallery-caption-content {
/* You can change the color of your image caption here */
color: #000000;
/* You can change the color of your image caption here */
font-family: "seasonsR"!important;
font-size: 20px !important;
font-weight: 400;
}
.gallery-caption-masonry-simple {
transition-delay: 0ms;
}
.gallery-caption {
pointer-events: none;
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.gallery-masonry-item {
background-color: #f1f1ef;}
.gallery-masonry-item:hover {
background-color: #f1f1ef;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.gallery-masonry-item-wrapper:hover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: #f1f1ef;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}