CSS3 Animated hover effects in Image

Creating CSS3 Animation hover effects can be actually simple. Today, we are going to utilize it as the animation engine for a series of thumbnail hover effects. With the accessibility of open spring projects, creating fresh and subtle animation can be truly fast and easy.

---

SEE THE DEMO OF THIS ANIMATION
Click every button and click image to see the effect.
At the bottom i have given the total zip file to download.

HTML:

We will make 3 layers wrapped inside a container called .box.

    Layer 1: .link Top layer, URL link, clicks to open in new window.
    Layer 2: .box-overlay Middle layer, this would be the image. Once mouse over, this image will be moved away to reveal content underneath it.
    Layer 3: .box-content Bottom layer, we insert content here. Once mouse over, this content will be revealed.

The following is the HTML structure. We added .magictime, data-hover and data-return in .box-overlay class. We need this to animate it. You can change type of animation you want by changing its hover and return data value.

CODE:

<div >
    <div >
        <div >
            <!-- content put here -->       
        </div>
    </div>
    <div data-hover="puffOut" data-return="puffIn">
        <!-- image put here -->
    </div>
    <a href="#" target="_blank"></a>                       
</div>

CSS

CSS is attractive directly ahead too. We added-index for .box-overlay, .link and .box-content to make certain it's in the right order.

CODE:

.box {
    width:260px;
    height:195px;
    margin:20px;
    float:left;
    position: relative;
}

.box-content {
    display:block;
    padding:20px;
    width: 100%;
    height: 100%;
    background: #333;
    color:#ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.box-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index:10;
}

a.link {
    display:block;
    width: 100%;
    height: 100%;        
    position: absolute;
    top:0;
    left:0;
    z-index:15;        
}   

jQuery / Javascript

Least, we use jQuery to add and remove classes. Keep in mind we specified the kind of animation we want in .box-overlay's data-hover and data-return. This script will get its worth and add the matching classes to complete the hover effect with the right CSS3 animation defined in Magic Animation store.

CODE:

$(function () {
    $('.box').hover(
        function () {
            var overlay = $(this).find('.box-overlay');
            overlay.removeClass(overlay.data('return')).addClass(overlay.data('hover'));
        },
        function () {
            var overlay = $(this).find('.box-overlay');        
            overlay.removeClass(overlay.data('hover')).addClass(overlay.data('return'));

        }
    );
});   

css_ani.zip
File Size:	172 kb
File Type:	zip

Download File

---