How to select -webkit-filter: drop-shadow with jQuery?


Tags: jquery,css,css3

Problem :

I used -webkit-filter: drop-shadow on a .png transparent image to give a nice 3D effect to it. Now, I'd like to have the drop shadow change color on hover slowly using jQuery.

The css:

  .image { -webkit-filter: drop-shadow(2px 2px 2px #fff); }

Now I want to use jQuery to animate that drop shadow something like this:

 $(".image").hover(function() { 
   $(this).animate({dropShadow: "2px 2px 2px #00f"},500);
 }, function() { 
   $(this).animate({dropShadow: "2px 2px 2px #fff"},500);
 });

I made up "dropShadow" as an example. I've searched around, but I don't see how I can select a webkit-filter like drop shadow. Is it even possible?



Solution :

You can do this by using pure CSS alone like below:

HTML:

<img class='image' src='path_to_your_image.format' />

CSS:

.image {
    -webkit-transition:-webkit-filter 0.4s ease-in-out;
}
.image {
    -webkit-filter: drop-shadow(5px 5px 5px #0f0);
}
.image:hover {
    -webkit-filter: drop-shadow(5px 5px 5px #00f);
}

Or, if for some reason you really need jQuery then you can do like below. This sample essentially adds/removes a separate class with a different drop-shadow setting on hover.

CSS:

.image {
    -webkit-transition:-webkit-filter 0.4s ease-in-out;
}
.image {
    -webkit-filter: drop-shadow(5px 5px 5px #0f0);
}
.hover {
    -webkit-filter: drop-shadow(5px 5px 5px #00f);
}

jQuery:

$(function () {
    $(".image").hover(function () {
        $(".image").toggleClass("hover");
    });
});

Sample with pure CSS | Sample with jQuery + CSS | Target Filter from jQuery


    CSS Howto..

    How to Flip Div's in Randomly

    How to make text on the same line different font without using extra divs?

    How to create a static footer in CSS?

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How to add vertical and horizontal separators between inline elements in CSS?

    I have an text input inside a div, how do I get the background of the div to change when the input has focus?

    How to make a div act as an infinite background

    How to apply a transition effect to some text when hovering over an icon?

    How can I make a span stretch the available space between to other spans?

    How to Make a Pentagram with CSS Border Attributes

    How do I create a full-width bar on a web page?

    How do I style an upload input using CSS?

    Hide and show when click a button

    How To Make Entire 'li' Area and Text A Clickable Link

    How to let Materialize use classes for dropdowns and not ID's?

    How do I change the z-index of a div when the user mouses over it?

    How to bottom center a span inside a list item

    How to prevent css missing when exporting some html to excel file?

    How do I get a CSS class to show up in my javascript with my previous method?

    How to build sliding horizontal menu. CSS

    How to solve Firefox 2.0 cross browser issues?

    How to position three divs horizontally

    How to remove CSS Class in aspx pages source codes using Regex?

    how to fit the background image to the containing anchor element?

    jQuery how to select children first level div's

    Why is there a vertical scrollbar, and how to get rid of it?

    How do i convert a jqueryui theme to Asp.net Theme

    How to pass css :active pseudo class to javascript?

    How to remove left and right margin on first and last div

    How to rotate pseudo element css