Серега187,
зарисовка на тему ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">.product.big{
-webkit-transform:scale(1.4) translateY(60px);
-moz-transform:scale(1.4) translateY(60px);
-o-transform:scale(1.4) translateY(60px);
transform:scale(1.4) translateY(60px);
z-index:10;
}
.product:first-child.big{
-webkit-transform:scale(1.4) translateY(60px) translateX(40px);
-moz-transform:scale(1.4) translateY(60px) translateX(40px);
-o-transform:scale(1.4) translateY(60px) translateX(40px);
transform:scale(1.4) translateY(60px) translateX(40px);
z-index:10;
}
.product{
border-radius: 12px;
margin:6px;
background-color:#FFFFFF;
position:relative;
width:150px;
height:300px;
float:left;
-webkit-transition:all 1.2s ease-in-out;
-moz-transition:all 1.2s ease-in-out;
-o-transition:all 1.2s ease-in-out;
-ms-transition:all 1.2s ease-in-out;
transition:all 1.2s ease-in-out;
font-size:15px;
border:2px solid #8B4513;
width:200px;
}
.product img{
border-radius: 12px;
cursor:pointer;
width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$(".product img").on("click", function() {
$(".product").not($(this).parent().toggleClass("big")
).removeClass("big");
})
$('html').click(function (event) {
if ($(event.target).closest('.product' ).length) return;
$(".product").removeClass("big");
});
})
</script>
</head>
<body>
<div class="product">
<img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
<h2>...</h2>
<div class="opis">
<p>...</p>
</div>
</div>
<div class="product">
<img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
<h2>...</h2>
<div class="opis">
<p>...</p>
</div>
</div>
<div class="product">
<img class="productImg" src="http://cs628716.vk.me/v628716234/e7bd/IkOfMTPs4Rc.jpg" alt="">
<h2>...</h2>
<div class="opis">
<p>...</p>
</div>
</div>
</body>
</html>