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 develop a webpage with Bootstrap [closed]

    How to get the CSS left-property value of a div using JavaScript?

    CSS / Jquery How to auto-size containers and images

    How to create javascript or css fadeInDown on mouseover?

    Can't show Combobox in table

    stopping slideshow and continue after 3 seconds

    Global CSS - how to implement multiple frameworks

    How to render same margins for every browser?

    How to edit the element.style css?

    how to create arrow down/up in css

    How to Decrease Image Brightness in CSS

    CSS How to display an image in the size of a / text line

    how to get background image present in other folder with css?

    How to select the second paragraph after another with css?

    How to make div layer unselectable in jquery and css

    How to hide the 2nd and 4th table row using css or jquery?

    How to avoid an hover on a menu item to affect the menu items on the right

    How to expand a div with css

    how to Put a img and text middle of a div

    How to add static files using Spring MVC and Thymeleaf

    How to get anchor tag on background image of div?

    How to extract class names from a CSS selector?

    How to center an image over another image in CSS

    How do I make my banner image stretch to fit the width of the page if the page width exceeds image width?

    How can I hide a div completely from HTML DOM?

    How to target a specific element of a div in CSS?

    CSS :hover that shows more than one image

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    How can I change my code from PHP to HTML?

    How to slide a DIV on link click