Sketch Hover

15 mars 2019 in Ateliers

Code HTML

 

XHTML

<div class="img"> <img src="img/00.jpg"> <img src="img/01.jpg"> </div> <script type="text/javascript" src="js/jquery-latest.min.js"></script>

1 2 3 4 5 6

<div class="img"> <img src="img/00.jpg"> <img src="img/01.jpg"> </div>   <script type="text/javascript" src="js/jquery-latest.min.js"></script>

Code CSS

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

.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

 

JavaScript

$('.img').hover(function(){ $(this).find("img:last").fadeToggle(); $(this).attr('src', src); });

1 2 3 4

$('.img').hover(function(){ $(this).find("img:last").fadeToggle();                 $(this).attr('src', src); });

David LAURENT | TMI | Webinnov™