Jump to content

Jasper - Image hover

Recommended Posts

Site URL: http://francisleclerc.com

Hello!

I would like to change the hover effect on the homepage images for my website which is using the Jasper template. I would like for the images to change to a single color when hovering over. Each images would have a different color. 

If anyone could help it would be greatly appreciated!

Thank you!

Edited by FLCJasp
Link to comment

Add to Home > Design > Custom CSS

a.index-item-link.intrinsic:after {
    content: "";
    position: absolute;
    background: red;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
}
a.index-item-link.intrinsic:hover:after {
    opacity: 1;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/3/2020 at 6:16 AM, FLCJasp said:

Hello,

Thank you very much for the code.

Is there a way to affect only one image?

Thanks. 

Which image?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi,

sorry I wasn't clear. Let say my index page has 9 pages/thumbnail images.

The code you've given me affect the hover of all 9 images. Would it be possible to only affect one?

The first thumbnail would be red when hovered, the second green, etc. 

Thanks. 

Link to comment
15 hours ago, FLCJasp said:

Hi,

sorry I wasn't clear. Let say my index page has 9 pages/thumbnail images.

The code you've given me affect the hover of all 9 images. Would it be possible to only affect one?

The first thumbnail would be red when hovered, the second green, etc. 

Thanks. 

.index-section:nth-child(1) a.index-item-link.intrinsic:after {
    content: "";
    position: absolute;
    background: red;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
}
.index-section:nth-child(1) a.index-item-link.intrinsic:hover:after {
    opacity: 1;
}
.index-section:nth-child(2) a.index-item-link.intrinsic:after {
    content: "";
    position: absolute;
    background: green;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
}
.index-section:nth-child(2) a.index-item-link.intrinsic:hover:after {
    opacity: 1;
}
.index-section:nth-child(3) a.index-item-link.intrinsic:after {
    content: "";
    position: absolute;
    background: gray;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
}
.index-section:nth-child(3) a.index-item-link.intrinsic:hover:after {
    opacity: 1;
}

Repeat for other items

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
On 3/3/2021 at 5:50 AM, debbie-lee said:

I'm using the same exact Jasper template but when I put the CSS code in, my gallery images still do not activate the hover. Can someone help me out on this?

Hi. Can you share link to your site? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.