How to remove CSS image blend mode on hover

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

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.

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

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.

Thank you this is perfect!

@creedon are you able to share css for how we can achieve a hoverable blend mode for summary block images? So similarly, I'm looking to create a "multiply" or "screen" blend mode (tbd) with a single color background for all summary block images, so they blend with the color #1E1E24 in normal state, and then when hovering, the blend mode eases out to disappear. Make sense? I can't seem to figure out how to execute for a whole set of summary block thumbnails. 

On 12/21/2020 at 4:12 AM, Alexg77 said:

@creedon are you able to share css for how we can achieve a hoverable blend mode for summary block images? So similarly, I'm looking to create a "multiply" or "screen" blend mode (tbd) with a single color background for all summary block images, so they blend with the color #1E1E24 in normal state, and then when hovering, the blend mode eases out to disappear. Make sense? I can't seem to figure out how to execute for a whole set of summary block thumbnails. 

Can you share site url? We can help easier

@tuanphanyes! Site url: https://apple-drum-7nk8.squarespace.com/ Password: p3akt3ch

So my CSS is currently:

// blog image block bw: inactive
  #block-yui_3_17_2_1_1607119205190_12427 .sqs-block-summary-v2 .img-wrapper img{transition: filter .5s ease-in-out;  filter: grayscale(100%);}

//blog image block color: active
  #block-yui_3_17_2_1_1607119205190_12427 .sqs-block-summary-v2 .img-wrapper img:hover {  filter: grayscale(0%);}
 

But I'd like to find a way to make a blend mode -- either "multiply" or "screen" with overlay color #1E1E24. So trying to make same animation that's currently working, but instead of a grayscale, the filter would be one of the blend modes.