Jump to content

Guerolito

Member
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Guerolito

  1. Hey @tuanphan could you help whit this please? I don´t achieve to get the overlay transition. Thank u
  2. 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; }
  3. 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
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.