Галерея рубашек
Интересный и простой эффект, который можно использовать на сайте интернет магазина. Полноразмерные изображения помещаются в контейнер DIV меньшего размера. Изображение центрируется, но не показывается полностью, так как параметр overflow:hidden - в состоянии включен. При наведении мыши на картинку, overflow:hidden переходит в состояние выключен и рубашка показывается полностью.
HTML
<div id="content">
<div class="row">
<div class="teebox">
<a href="#"><img src="overlay.png"/></a><img src="pinktee.png"/>
<div class="caption">$10</div>
</div>
</div>
</div>CSS
*{
margin:0;
padding:0;
}
img{
border: none;
}
body {
text-align: center;
background: #222;
}
h2{
color: #333;
font:italic 36px Georgia, serif;
padding: 20px;
border-bottom: dashed 1px #999;
clear: both;
}
#content{
width: 100%;
margin: 0px auto;
background: #fff;
text-align: center;
margin-bottom: 50px;
}
.row{ /*Container for each row of shirts*/
width: 495px;
margin: 0px auto;
clear:both;
padding: 20px 0;
}
.teebox{
overflow: hidden; /*Prevents excess of image from showing*/
position: relative;
margin: 0 10px;
width: 144px; /*Width and height define thumbnail size*/
height: 183px;
float: left;
clear: right;
z-index: 0;
}
.selected{
overflow: visible; /*Display part of image that not currently visible*/
z-index: 10;
}
.teebox img {
left:-84px; /*Use this number to center your image when not hovered*/
position: absolute;
}
.teebox a{ /*Area that changes to selected class when hovered over*/
display:block;
position: relative;
float: left;
left: 84px; /*Use to line up the overlay image*/
z-index: 1;
}
.caption{
color: #2FB5FF;
font:14px Arial;
position: relative;
float: left;
left: 0px;
top: 146px;
padding: 10px;
background: #222;
z-index: 1;
}
JS
В шапке подключаем библиотеку jQuery.
И вызываем код:
$(document).ready(function() {
$(".teebox a").mouseover(function(){
$(this).parent().addClass("selected");
$(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
$(this).parent().find('.caption').hide(); //Hides Caption
}).mouseout(function(){
$(this).parent().removeClass("selected");
$(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
$(this).parent().find('.caption').show(); //Shows Caption
});
});Ссылки
