CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Borysowski
Daniel Borysowski

Reputation: 133

Class change on hover: CSS vs jQuery (transition glich)

my site is build with multiple blocks, that contain of IMG, TITLE + TEXT, like this (they are in 3 columns):

<div class="element">
  <img class="responsive grey" src="img_src" />
  <article>
    <h1>title</h1>
    <p>text</p>
  </article>
</div>

The css for ".grey" (that I want with transition) is:

img.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

  /* here should go transition */

}

Plus action on div:hover is:

.element:hover img.grey {
  -webkit-filter: none;
  filter: none;

  /* here should go transition */

}

As u can see, pointing mouse over whole DIV should trigger hover action for IMG only.

Problem is, that when I add transition to "img.grey" and ".element:hover img.grey", cause I want it to change smoothly, the effect becomes a bit glichy. I guess it's because "filter: none" along with "transition: transition_options;" are in colflict. Filter WITH no filter at the same time :) Sometimes it goes smooth, sometimes after hover I get white background, nvm. Many glitchy effects.

What I tried, was to delete ".element:hover img.grey {}" and simply add jQuery script that will toggle ".grey" class onmouseover / onmouseout (hover). I used standard "toggleClass()" inside of "$('element').hover()" function.

Also sth I found on css-tricks.com:

$('.element').hover(
       function(){ $("img").removeClass('grey') },
       function(){ $("img").addClass('grey') }
)

I thought that can help cause I am avoiding "filter: none VS transition" conflict. But both didn't work at all. Can anyone help me with it?

P.S. Didn't work means that there was no hover effect. After hover action images stayed in greyscale.

Upvotes: 2

Views: 140

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Do you simply want to have transition on image hover? Then you could try this — http://codepen.io/sergdenisov/pen/GJoyNz.

img {
    width: 300px;
    height: 300px;
}

img#lena-desaturate {
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url(#greyscale);
    filter: grayscale(100%);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

    img#lena-desaturate:hover {
        -webkit-filter: grayscale(0);
        filter: none;
        filter: grayscale(0);
    }

Otherwise I don't understand your question.

Upvotes: 0

Related Questions