Sketch Hover
David LAURENT | TMI | Webinnov™
Code HTML
![]()
Code CSS
.img img { position:absolute; top:0; left:0; padding: 6px 6px 5px 6px; border: solid 1px #ddd; border-bottom: solid 1px #ccc; -webkit-transition: -webkit-box-shadow 1.5s ease-in; -moz-transition: box-shadow 1.5s ease-in; -o-transition: box-shadow 1.5s ease-in; transition: box-shadow 1.5s ease-in; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } img:hover { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset; -webkit-transition: -webkit-box-shadow 1.5s ease-in-out; -moz-transition: box-shadow 1.5s ease-in-out; -o-transition: box-shadow 1.5s ease-in-out; transition: box-shadow 1.5s ease-in-out; opacity: 0.9; -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity = 90); cursor:url(https://webinnov.fr/blog/news/2013-06-03/cursor/Pinceau.png), auto; } img a img { opacity: 0; border: none; -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity = 0); -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; -o-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; } .img img:last-child { display:none; }Code JavaScript
$('.img').hover(function(){ $(this).find("img:last").fadeToggle(); $(this).attr('src', src); });