×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

smooth_css3_image_transition_hover_effects.css

2
0
 
2
Language: CSS
Posted by: Wantoi OestKnut
Added: Oct 31, 2014 8:24 AM
Views: 28
Tags: image css css3 hover transition smooth effect
Some basic hover effects with CSS3
  1. /*###################################################################################################*/
  2. .image_overlay_hover_effect{
  3.      display:block;
  4.      width:240px;
  5.      height:160px;
  6.      background:url("http://premiumcoding.com/CSSTricks/AnimatedHover/imageHover.png");
  7.      position:absolute;
  8.      cursor:pointer;
  9.      opacity:0;
  10.      filter:alpha(opacity=0); /* For IE8 and earlier */
  11.      -webkit-transition: opacity 0.2s linear;
  12.      -moz-transition: opacity 0.2s linear;
  13.      -o-transition: opacity 0.2s linear;
  14.      transition: opacity 0.2s linear;
  15. }
  16. .image_overlay_hover_effect:hover{
  17.      opacity:0.9;
  18.      filter:alpha(opacity=0.9);
  19. }
  20.  
  21. /*###################################################################################################*/
  22. .image_overlay_hover_effect2{
  23.      display:block;
  24.      width:240px;
  25.      height:160px;
  26.      background:#1e1e20;
  27.      position:absolute;
  28.      cursor:pointer;
  29.      opacity:0;
  30.      filter:alpha(opacity=0); /* For IE8 and earlier */
  31.      -webkit-transition: opacity 0.2s linear;
  32.      -moz-transition: opacity 0.2s linear;
  33.      -o-transition: opacity 0.2s linear;
  34.      transition: opacity 0.2s linear;
  35. }
  36. .image_overlay_hover_effect2:hover{
  37.      opacity:0.5;
  38.      filter:alpha(opacity=0.5);
  39. }
  40.  
  41. /*###################################################################################################*/
  42. .image_overlay_hover_effect3{
  43.      cursor:pointer;
  44.      -webkit-transition: all 1s ease-in-out;
  45.      -moz-transition: all 1s ease-in-out;
  46.      -o-transition: all 1s ease-in-out;
  47.      -ms-transition: all 1s ease-in-out;
  48.      transition: all 1s ease-in-out;
  49. }
  50. .image_overlay_hover_effect3:hover{
  51.      -webkit-transform: rotateY(180deg);
  52.      -moz-transform: rotateY(180deg);
  53.      -o-transform: rotateY(180deg);
  54.      -ms-transform: rotateY(180deg);
  55.      transform: rotateY(180deg);
  56. }

Write a comment

To post comments, please log in or register.