Jasper - Image hover

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!

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

Hello,

Thank you very much for the code.

Is there a way to affect only one image?

Thanks. 

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?

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. 

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

Man, that's exactly what I wanted.

thanks a lot.

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?

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