I'm using a piece of custom CSS to add a linear gradient with blend mode to the images on my index page. I'm using the Jasper template. I want it so when I hover on the image links, the effect goes away but can't seem to get it to work. I've attached two images. One shows the gradient, but when I hover, instead of the picture as it is, it looks really dark.
I suggest removing all CSS related to achieving the effect you want. The following selectors are causing the buttons to disappear on hover.
.index-item:hover .index-item-title {
display: none;
Question
manta 0
Hi all,
I'm using a piece of custom CSS to add a linear gradient with blend mode to the images on my index page. I'm using the Jasper template. I want it so when I hover on the image links, the effect goes away but can't seem to get it to work. I've attached two images. One shows the gradient, but when I hover, instead of the picture as it is, it looks really dark.
Code below:
//INDEX COLOR GRADIENT blend mode .index-item.has-item-image { background: linear-gradient(to bottom, rgba(255, 114, 92, 1) 0%,rgba(154, 212, 214,1) 60%); img { mix-blend-mode: MULTIPLY; } } .index-item.has-item-image:hover { background: none; img { mix-blend-mode: none; } } //END LINEAR GRADIENT EFFECT
Link to post
Top Posters For This Question
3
2
2
1
Popular Days
Sep 21
4
Dec 29
1
Sep 22
1
Dec 20
1
Top Posters For This Question
manta 3 posts
creedon 2 posts
Alexg77 2 posts
tuanphan 1 post
Popular Days
Sep 21 2020
4 posts
Dec 29 2020
1 post
Sep 22 2020
1 post
Dec 20 2020
1 post
Popular Posts
creedon
I suggest removing all CSS related to achieving the effect you want. The following selectors are causing the buttons to disappear on hover. .index-item:hover .index-item-title { display: none;
tuanphan
Can you share site url? We can help easier
Posted Images
7 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment