Jump to content

mykemelo

Member
  • Posts

    4
  • Joined

  • Last visited

Everything posted by mykemelo

  1. This works, thank you so much! The problem I am running into now is, all the galleries on other pages as well as single images (I'm assuming due to figure:hover img) are scaling up as well. Any idea on how to fix this? Thanks!
  2. Site URL: https://www.mmelo.ca/work I want the pictures in my work page to scale up and have the caption with a black overlay to appear on top when hovering over each picture. I have gotten the caption and overlay to work, but when I tried adding the code to scale the photos up, the photos do in fact scale, however it scales out of its frame. As you can see below, I tried adding overflow: hidden to counteract that, but it doesn't seem to do anything. Any help would be appreciated, thanks! This is the code I used: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: flex-end; /* center vertically */ justify-content: left; /* center */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ padding: 0px 0px 20px 30px; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-grid-item:hover { transform: scale(1.1); width: 100%; height: 100%; overflow:hidden!important; } .gallery-grid-item { overflow:hidden!important; position: relative; } .gallery-caption-grid-simple { transition-delay: 0ms; }
×
×
  • 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.