catalog page hover element
by Vladislav Altyncev
HTML
<link rel="stylesheet" href="//yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/grids-min.css&pure/0.3.0/forms-min.css">
<script src="//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,cyrillic-ext,cyrillic"></script>
<script src="//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic-ext,cyrillic"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="http://name-mobile.herokuapp.com/css/style.css">
<div class="catalog-content">
<ul class="splash-slider">
<li>
<div class="splash-wrap clearfix">
<div class="splash-wrap--img">
<img src="http://mdata.yandex.net/i?path=b0315073717_img_id4129002154421034629.jpg" width="150" height="260" alt="">
</div>
<div class="splash-body">
<div class="splash-body--review clearfix">
<div class="splash-body--head">
<h3><a href="#">Samsung S 7562 Galaxy S Duos Chic White La Fleur</a></h3>
</div>
<div class="splash-body--price">
18 999 руб.
</div>
<div class="splash-body--basket">
<a href="#" class="btn btn-green">В корзину</a>
</div>
</div>
</div>
<hr>
<div class="splash-desrc">
...
CSS
.catalog-content {padding: 0;}
.splash-slider {width: 740px;}
.splash-slider li:hover .splash-desrc,
.splash-slider li.active .splash-desrc {z-index: -1;}