CODEWITHSUNDEEP
css-transitions
Lucky
Lucky

Reputation: 335

how to set transition on hover

I want to set opacity transition on hover, but can't understand how. Any help will be apriciated.

<div><img src="http://codezona.com/wp-content/uploads/2013/03/rusalkasmall.jpg" alt=""></div>
img {
 display:block;
}
div {
  position:relative;
}

div:hover:before {
  content:"";
  opacity:0.1;
  position:absolute;
  width:170px;
  height:100px;
  background:#ebe316; 
}

DEMO

Upvotes: 0

Views: 82

Answers (1)

Daniel
Daniel

Reputation: 4946

Use the CSS3 transition. Here is an example with a fiddle, so you can see it work. 

#on-hover {
    opacity:0;
    /* Firefox */
    -moz-transition-property: opacity;
    -moz-transition-duration: 2s;
    -moz-transition-delay: 1s;
    /* WebKit */
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    /* Opera */
    -o-transition-property: opacity;
    -o-transition-duration: 2s;
    -o-transition-delay: 1s;
    /* Standard */
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 1s;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#on-hover:hover {
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

http://jsfiddle.net/djwave28/CuNkZ/6/

Not supported in browsers older than IE10 browsers, but you can apply the -ms-filter to have the opacity respond.

Upvotes: 1

Related Questions