Jump to content

Affect multiple elements with one rollover

Recommended Posts

Hi,

I am trying to achieve text on rollover using Squarespace 7.1. I am quite new at this, but I have had quite a few attempts before asking. I am hoping there is a simple solution. 

So far I have created a grid of images that I would like to reveal project title, description, etc. when rolled over. The images need to maintain a link so that they can be clicked on in the rolled over state. I have tried multiple approaches -

1. The InsidetheSquare solution. I have dismissed as it isolates the link to only the text box. (https://insidethesquare.co/squarespace-tutorials/reveal-text-hover-fluid

2. I then tried the approach of adding a base image (opacity 100%), placing text box over that with semi-opaque background, then placing replica image over the top that would fade to 0% on rollover. This almost got me there, but I noticed that the stack of images/text does not load in the right order due to the scrolling fade animation (which I would like to keep). 

3. Latest attempt - I created a replica of the image with a white wash over it. Over that I have placed the text. Over that I have placed the main image at 100% opacity, which fades back to 0% on rollover. This reveals the text as expected. However, again, the text loads before the image on animated scroll and on refresh. 

Unless someone has a better way to achieve it, I was hoping to find out if there is a way that I can link the opacity of the text to the rollover state of the image in CSS. That way the text would only become opaque during rollover, as the foreground image fades. 

Password: carbon 

Thank you 

Edited by ConorG
added website detail
Link to comment
  • Replies 2
  • Views 692
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 4 months later...

You can use a Gallery Section, add some text into Description Box when edit each image. If you need to add both title + description,... use this format into Description box

<h3>Caption title</h3>
<p>Caption text line 1</p>
<p>Caption text line 2</p>

Then add this code to Design > Custom CSS. It will hide all text, then make it appear + overlay when hover on image

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.