Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Jasper - Image hover


FLCJasp

Question

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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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;

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

6 answers to this question

Recommended Posts

  • 0

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

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0
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?

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0

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 post
  • 0
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

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...