Sketch Hover

15 mars 2019 in Ateliers

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);
});