.Enlarge { position:relative; height:150px; width:250px; } .Enlarge span { position:absolute; left: -9999px; visibility: hidden; opacity: 0;-webkit-transition: opacity 0.5s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } div.Enlarge:hover{ z-index: 999; cursor:pointer; } div.Enlarge:hover span{ visibility: visible; opacity: 1; top: 50px; left: 0px; width:500px; height:300px; padding: 5px; background:#9f499b; }
<section class="item brochure"> <div class="Enlarge"> <img src="images/portfoli/small.jpg" /> <span><img src="images/portfoli/large.jpg" /></span> </div> </section> <section class="item brochure"> <div class="Enlarge"> <img src="images/portfoli/small2.jpg" /> <span><img src="images/portfoli/large2.jpg" /></span> </div> </section> <section class="item brochure"> <div class="Enlarge"> <img src="images/portfoli/small3.jpg"/> <span><img src="images/portfoli/large3.jpg"/></span> </div> </section> <section class="item brochure"> <div class="Enlarge"> <img src="images/portfoli/small4.jpg"/> <span><img src="images/portfoli/large4.jpg" /></span> </div> </section>
$(document).ready(function() { $('#portfolio li').click(function() { // fetch the class of the clicked item var ourClass = $(this).attr('class'); // reset the active class on all the buttons $('#filterOptions li').removeClass('active'); // update the active state on our clicked button $(this).parent().addClass('active'); if(ourClass == 'all') { // show all our items $('#portfolio').children('section.item').show(1000); } else { // hide all elements that don't share ourClass $('#portfolio').children('section:not(.' + ourClass + ')').hide(1000); // show all elements that do share ourClass $('#portfolio').children('section.' + ourClass).show(1000); } return false; }); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)