Guerolito

Hey @tuanphan could you help whit this please? I don´t achieve to get the overlay transition. Thank u

Any solution?

On 3/15/2022 at 7:53 AM, tuanphan said:

You mean overlay or tex transition?

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

Hi! Is there any way to add a hover effect to the list image? Could it also the text to be underlined at the same time? 

I would love to achieve the effect on this site when you hover the images 

https://www.dica.es/es/proyectos