$(document).ready(function() { $(".container img:first-child").addClass('last'); $(".container img").click(function() { $(this).fadeOut('normal', function() { if ( $(this).hasClass('last') ) { $("img", $(this).parent()).css('z-index', 10); } else { $(this).css('z-index', 9) } $(this).show(); }); }); $(".container").mouseenter(function() { $(".tooltip", this).show(); }).mousemove(function(e) { $(".tooltip", this).css({ 'top' : e.pageY - this.offsetTop + 8, 'left' : e.pageX - this.offsetLeft + 15 }); }).mouseleave(function() { $(".tooltip", this).hide(); }).append('<div class="tooltip">Next</div>'); $(".container span").mouseenter(function() { $(".tooltip", $(this).parent()).hide(); }).mouseleave(function() { $(".tooltip", $(this).parent()).show(); }); });
.container { position: relative; width: 636px; height: 400px; margin: 0 auto; } .container img { position: absolute; top: 0; left: 0; z-index: 10; } .container span { position: absolute; top: 20px; left: 10px; width: 550px; padding: 10px; color: #FFF; background: #000 ; z-index: 11; opacity: 0.7 ; filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70) ; } .container span a { float: right; color: #FFF; font-size: 12px; } .tooltip { position: absolute; display: none; padding: 3px 10px; background: #fff; color: #222; border: 1px solid #CCC; font-family: Arial; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; z-index: 11; }
<div class="container"> <img src="http://behance.vo.llnwd.net/profiles3/238220/projects/731038/d7f1d5accad162de725a9fc229cc0b12.jpg" alt="" /> <img src="http://behance.vo.llnwd.net/profiles3/238220/projects/731038/3ae3d10f265c8067ec047a2a08ef7761.jpg" alt="" /> <img src="http://behance.vo.llnwd.net/profiles3/238220/projects/731038/32fbd56389fb852756d50d931c6ee022.jpg" alt="" /> <img src="http://behance.vo.llnwd.net/profiles3/238220/projects/731038/7ea76082812b759ba3ffa1e6e50aaaa8.jpg" alt="" /> <img src="http://behance.vo.llnwd.net/profiles3/238220/projects/731038/a0ea5f37a9c0ac9f249b916912ed5138.jpg" alt="" /> <span><a href="http://www.fashionserved.com/gallery/Fashion/731038">IMAGES BY POLINA EFREMOVA</a> Fashion</span> </div>