Trik Css,change image on hover

HTML (css.html)

<html>
<head>
<title>Trik Css</title>
</head>
<style>
.panel{
background:url(images/1.png) top right no-repeat;
display:block;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background-position: 0% 100%;
}
#thumb{
opacity:0;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

}
#thumb:hover{
opacity:1;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

}
</style>
<body>
<table><tr><td>
<a href="#">
<span class="panel"><img src="images/2.png" alt="" id="thumb" ></span></a>
</td></tr></table>
</body>
</html>



Demo/example :


css hover animation


Note : Doesn`t work in ie.

1 komentar:

Leave a message