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

How to remove CSS image blend mode on hover

manta

Asked by manta,

Followers 1

Question

manta    0

manta
Posted

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

image.thumb.png.b8437fd22c774c60ae4acb46f2f5b256.png

image.png

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

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;

Posted Images

4 answers to this question

Recommended Posts

  • 1

creedon    224

creedon
Posted

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

.index-item:hover .index-item-category {

  display: none;
  
  }

Make a copy in case you want to restore.

Add the following CSS. 

.index-item.has-item-image {

  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 114, 92, 1)),color-stop(60%, rgba(154, 212, 214,1)));
  background: -o-linear-gradient(top, rgba(255, 114, 92, 1) 0%,rgba(154, 212, 214,1) 60%);
  background: linear-gradient(to bottom, rgba(255, 114, 92, 1) 0%,rgba(154, 212, 214,1) 60%);
  
  }

.index-item.has-item-image img {

  mix-blend-mode: MULTIPLY;
  
  }

.index-item.has-item-image:hover {

  background-color: unset;
  
  }

.index-item.has-item-image:hover img {

  mix-blend-mode: unset;
  
  }

/* hide the link */

.index-item-text-wrapper {

  display: none;
  
  }

/* show the link */

.index-item:hover .index-item-text-wrapper {

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  }

If you want the links to show all the time remove the link related rule-sets.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

creedon    224

creedon
Posted

Please give us the URL for your site so we can take a look at your issue. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

manta    0

manta
  • Author
Posted
17 hours ago, creedon said:

Please give us the URL for your site so we can take a look at your issue. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Hi creedon! Thanks for the quick response: www.bvandaal.com and password is WIP

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 1
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources