<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> <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>25 000</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://i2.wallpaperscraft.com/image/dota_2_carl_invoker_art_magician_cloak_101165_300x188.jpg); "> <i class="fa fa-eye" aria-hidden="true"></i> </a> <h4>Оспаривание кадастровой<br> стоимости</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>17 000</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(http://www.wallpapersbyte.com/wp-content/uploads/2015/07/Dota-2-Sven-The-Rogue-Knight-Game-Character-WallpapersByte-com-2560x1600.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>8500</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(http://tapchigameviet.com/upload/public/news/2017/02/01/photo-3-1485925253473.jpg); "> <i class="fa fa-eye" aria-hidden="true"></i> </a> <h4>Оценка инвестиционных<br>проектов</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>1950</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://lh3.googleusercontent.com/-6Ozf8LEISII/Ve76gcrFHBI/AAAAAAAACGc/mfZuSEXloc8/w960-h540/juggernaut.jpg); "> <i class="fa fa-eye" aria-hidden="true"></i> </a> <h4>Оценка нематериальных<br>активов</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>999</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://images8.alphacoders.com/423/thumb-1920-423601.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>143 600</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://images2.alphacoders.com/576/thumb-350-576627.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> </div> </section>

.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; margin-bottom: 10px; } .services-item-image { min-height: 190px; background-size: cover; position: relative; } .services-item-image .fa { font-size: 30px; color: #fff; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .services-item-image::before { position: absolute; content: ' '; width: 100%; height: 100%; top: 0; left: 0; background-color: #22133e; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .services-item-stars { font-size: 0.6875em; color: #b4b4b4; } .services-item-stars .fa { margin-left: 1px; -webkit-transition: all .5s ease; transition: all .5s ease; } .services-item-price { margin-top: 5px; margin-bottom: 26px; font-size: 1.0625em; font-family: "RobotoBold", sans-serif; } .services-item-price span { font-size: 1.75em; } .services-item-price .fa { color: #ffcc00; font-size: 1.125em; }

(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();