{"id":6095,"date":"2012-01-18T06:19:42","date_gmt":"2012-01-18T06:19:42","guid":{"rendered":"http:\/\/premiumcoding.com\/?p=6095"},"modified":"2017-08-31T06:30:35","modified_gmt":"2017-08-31T06:30:35","slug":"css3-tricks-animated-hover-effects","status":"publish","type":"post","link":"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/","title":{"rendered":"CSS3 Tricks: Animated Hover Effects (3D Flip)"},"content":{"rendered":"

In previous article of our CSS3 Tricks column<\/strong> I showed you how to create rounded buttons<\/a> and then animate<\/strong> them with CSS3<\/strong> only. In today’s tutorial we will make animated hover effects<\/strong> on images without any help of javascript. In our last example we will even make a simple 3D flip<\/strong>. I recommend that you download the source files first and check the live demo.<\/p>\n

LIVE DEMO<\/h3>\n
CSS3 Animated Hover Effects Preview!<\/a><\/div><\/div><\/div>\n

<\/h2>\n

    <\/p>\n

<\/h2>\n

[download id=”151″]<\/p>\n

ADD IMAGES IN HTML<\/h3>\n

In our first example we will use a png file as our hover effect. After we move the mouse over the original image the hover effect<\/strong> will fade in with a simple animation (opacity)<\/strong>. We will first add a simple image into our html code:
\n

<\/p>\n
<\/div>\n

<\/div>
\nNow create a file called style.css and add the following CSS code to it:
\n


\n.imageOverlayer{
\n display:block;
\n width:240px;
\n height:160px;
\n background:url(“imageHover.png”);
\n position:absolute;
\n cursor:pointer;
\n opacity:0;
\n filter:alpha(opacity=0); \/* For IE8 and earlier *\/<\/p>\n

-webkit-transition: opacity 0.2s linear;
\n -moz-transition: opacity 0.2s linear;
\n -o-transition: opacity 0.2s linear;
\n transition: opacity 0.2s linear;
\n}
\n<\/div>
\nWe have to define the background image<\/strong> that represents the hover<\/strong> (imageHover.png). Set width and height to fit to your example. The important part is to set opacity to 0<\/strong> since we do not want the image to be visible until we actually hover over the image<\/strong>.\u00a0Animation is defined in the last four lines (transition<\/strong>). We tell the css to use the transitions on opacity only and that length of the transition is 0.2s.<\/p>\n

ANIMATE THE HOVER WITH CSS3<\/h3>\n

It is now time to set the hover effect and the code is actually really simple:
\n


\n.imageOverlayer:hover{
\n opacity:0.9;
\n filter:alpha(opacity=0.9);
\n}
\n<\/div>
\nWe are finished, you now have a working example of a simple animated hover effect<\/strong>\u00a0that uses an image as a background. If you like the image that is used as the hover effect you can download the psd version<\/a> from our freebie section. You can use a color for hover background instead of an image. Simply replace the line\u00a0background:url(“imageHover.png”);<\/strong> with\u00a0background:#1e1e20;<\/strong> and it will work right away. Just remember to lower opacity a bit on hover since image is now almost invisible when you move your mouse over it.<\/p>\n

SIMPLE 3D FLIP ON HOVER<\/h3>\n

CSS3<\/strong> is capable of much more then just simple fading animations. Our next example will implement a simple 3D flip<\/strong> on mouse over. Add the following code to the hmtl file to add the image and some text:
\n

<\/p>\n
\n

THIS IS SOME TEXT<\/span>\n<\/div>\n

<\/div>
\nIt is now time to define the animation in style.css
\n


\n.imageOverlayer3{
\n cursor:pointer;<\/p>\n

-webkit-transition: all 1s ease-in-out;
\n -moz-transition: all 1s ease-in-out;
\n -o-transition: all 1s ease-in-out;
\n -ms-transition: all 1s ease-in-out;
\n transition: all 1s ease-in-out;<\/p>\n

}
\n<\/div>
\nAs you can see all we have to define are the transitions. We will use easings this time also to make the effect more realistic. All we have to do now is add the 3D rotation that will simulate the flip effect:<\/strong>
\n


\n.imageOverlayer3:hover{
\n -webkit-transform: rotateY(180deg);
\n -moz-transform: rotateY(180deg);
\n -o-transform: rotateY(180deg);
\n -ms-transform: rotateY(180deg);
\n transform: rotateY(180deg);
\n}
\n<\/div>
\nThat is all that is to it, flip effect already works. More simple then most would expect. To change the axis of the flip simply change rotateY to rotateX or rotateZ.<\/p>\n

CONCLUSION<\/h3>\n

Implementation of animated hover effects<\/strong> with CSS3 is very simple. Even 3D flips<\/strong> are a piece of cake and examples above demonstrate just how powerful and easy to use CSS3<\/strong> can be. Please note that these animations are only supported in webkit browsers (Chrome, Opera, latest versions of FF). In our future tips&tricks posts I will show you how to make gradients, apply animations to images and much more so stay tuned!<\/p>\n

[download id=”151″]<\/p>\n","protected":false},"excerpt":{"rendered":"

In previous article of our CSS3 Tricks column I showed you how to create rounded buttons and then animate them with CSS3 only. In today’s tutorial we will make animated hover effects on images without any help of javascript. In our last example we will even make a simple 3D flip. I recommend that you …<\/p>\n","protected":false},"author":1,"featured_media":6127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[722,723,724,721],"yoast_head":"\nCSS3 Tricks: Animated Hover Effects (3D Flip) - PremiumCoding<\/title>\n<meta name=\"description\" content=\"In previous article of our CSS3 Tricks column I showed you how to create rounded buttons and then animate them with CSS3 only. In today's tutorial we will\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Tricks: Animated Hover Effects (3D Flip) - PremiumCoding\" \/>\n<meta property=\"og:description\" content=\"In previous article of our CSS3 Tricks column I showed you how to create rounded buttons and then animate them with CSS3 only. In today's tutorial we will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"PremiumCoding\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-18T06:19:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-31T06:30:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/premiumcoding.com\/#organization\",\"name\":\"PremiumCoding\",\"url\":\"https:\/\/premiumcoding.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2013\/12\/premiumcoding-wordpress-themes-logo@2x.png\",\"width\":400,\"height\":134,\"caption\":\"PremiumCoding\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/premiumcoding.com\/#website\",\"url\":\"https:\/\/premiumcoding.com\/\",\"name\":\"PremiumCoding\",\"description\":\"WordPress Themes, Tutorials & Articles\",\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/premiumcoding.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#webpage\",\"url\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/\",\"name\":\"CSS3 Tricks: Animated Hover Effects (3D Flip) - PremiumCoding\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#primaryimage\"},\"datePublished\":\"2012-01-18T06:19:42+00:00\",\"dateModified\":\"2017-08-31T06:30:35+00:00\",\"description\":\"In previous article of our CSS3 Tricks column I showed you how to create rounded buttons and then animate them with CSS3 only. In today's tutorial we will\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#webpage\"},\"author\":{\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\"},\"headline\":\"CSS3 Tricks: Animated Hover Effects (3D Flip)\",\"datePublished\":\"2012-01-18T06:19:42+00:00\",\"dateModified\":\"2017-08-31T06:30:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#primaryimage\"},\"keywords\":\"css3 3d flip,css3 animated hover,css3 hover effect,css3 tricks\",\"articleSection\":\"Tutorials\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/premiumcoding.com\/css3-tricks-animated-hover-effects\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\",\"name\":\"Ales\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5b70a6c161b959988486ba65abb4653?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ales\"},\"sameAs\":[\"https:\/\/premiumcoding.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/6095"}],"collection":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/comments?post=6095"}],"version-history":[{"count":0,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/6095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media\/6127"}],"wp:attachment":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media?parent=6095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/categories?post=6095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/tags?post=6095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}