Kép képet vált ha ráviszed az egeret
2013.08.23. 14:21
Demo:
HTML kód:
<div class="pulloutimage" style="width:245px; height:168px">
<img class="original" src="képed url címe" />
<img class="ondemand" src="képed url címe" />
</div>
</div>
CSS kód:
<style>
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute;
left: 0;
}
.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden;
}
.pulloutimage img.original{
z-index: 1;
}
@-webkit-keyframes revealfromright{
0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.pulloutimage:hover img.original{
opacity:0.5;
}
</style>
|