Search code examples
javascriptjqueryimagecolorsfill

Progressive fill color and hide image

I would be thankfull for some help in this matter please.

I have some divs that form squares of 200x200px with a thick solid border of white and an image inside. I would want that when I click ok a menu icon ("refs") it appears that way, and when I click on another ("skills") it will hide the image and animate a progressive fill color from bottom to top with white and form a specific word in the middle of the square . Can you please help me with this :)

thank you

Solution

  • You can get the .animate() or .fadeIn() in jquery for this. http://api.jquery.com/fadeIn/

    More explained : You give a common class name to all the squares and then call out a click function for the class.

     $('.imagesquares').click(function(){
     Function for fadeIn and close goes here
 });

    Check out fadeIn() examples provided and you can proceed well i think.

    Cheers