"Item-game"
Bootstrap 3.3.0 Snippet by Vadim1124

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="sect-services" id="sect-services">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="services-item">
<a href="#" class="services-item-image" style="background-image: url(http://img.zoneland.ru/images4/669463Edo-Lamborghini_Murcielago_LP710_Audigier_2009_1600x1200_wallpaper_02.jpg.jpg); ">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
<h4>Оценка недвижимости</h4>
<div class="services-item-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="services-item-price">
<i class="fa fa-tags" aria-hidden="true"></i> от <span>1700</span>руб<div class=""></div>
</div>
<a href="#" class="button">Подробнее</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="services-item">
<a href="#" class="services-item-image" style="background-image: url(https://images.alphacoders.com/533/thumb-350-533719.jpg); ">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
<h4>Оценка земли</h4>
<div class="services-item-stars">
<i class="fa fa-star"></i>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.sect-services {
background-color: #efefef; }
.sect-services .col-md-3 {
padding: 0; }
.services-item {
position: relative;
padding-bottom: 32px;
border: 5px #2f1a55 solid;
-webkit-transition: -webkit-transform .5s ease;
transition: -webkit-transform .5s ease;
transition: transform .5s ease;
transition: transform .5s ease, -webkit-transform .5s ease;
text-align: center;
background-color: #FFF; }
.services-item a.services-item-image {
display: block; }
.services-item:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 0 32px;
box-shadow: rgba(0, 0, 0, 0.35) 0 0 32px;
z-index: 4;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
border-color: #ffcc00; }
.services-item:hover a.services-item-image {
display: block; }
.services-item:hover a.services-item-image .fa {
opacity: 4; }
.services-item:hover a.services-item-image::before {
opacity: .7; }
.services-item:hover .services-item-stars {
color: #ffcc00; }
.services-item:hover .services-item-stars .fa {
margin: 0 5px; }
.services-item h4 {
font-size: 1.25em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function ($) {
$.fn.equalHeights = function () {
var $items = $(this);
function equalize() {
$items.height('initial');
var maxH = $items.eq(0).height();
$items.each(function () {
maxH = ($(this).height() > maxH) ? $(this).height() : maxH;
});
$items.height(maxH);
}
equalize();
$(window).bind('resize', function () {
equalize();
});
};
})(jQuery);
$(".services-item h4").equalHeights();
$(".new-item-text ").equalHeights();
$(".link-item ").equalHeights();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard

Questions / Comments: