<section id="Shows">
<div class="views-row">
<img src="http://www.eminem.com/sites/g/files/g20001906/f/styles/scale_w1280/public/201503/em-video.png?itok=2KVpaGra" alt="">
<div class="video-heading">
<div class="video-title">
NOT AFRAID: THE SHADY RECORDS STORY
</div>
</div>
</div>
<div class="views-row">
<img src="http://www.eminem.com/sites/g/files/g20001906/f/styles/scale_w1280/public/201503/em-video.png?itok=2KVpaGra" alt="">
<div class="video-heading">
<div class="video-title">
NOT AFRAID: THE SHADY RECORDS STORY
</div>
</div>
</div>
</section>
.views-row {
width: 100%;
padding: 0;
margin: 0;
margin: 0;
position: relative;
overflow-y: hidden;
padding: 0;
-webkit-filter:grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
transition: 0.5s;
}
.views-row:after {
content: '';
background: url(http://www.eminem.com/sites/deveminem.umg.edrupalgardens.com/files/201310/img-pattern2.png);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0.4;
}
.views-row:hover:after {
background: url();
}
.views-row img{
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
height: auto;
margin: 0;
position: relative;
z-index: 0;
padding: 0;
margin: 0;
}
.views-row:hover{
-webkit-filter:grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
.video-heading {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 90px;
background-color: rgba(0,0,0,0.7);
padding: 25px 20px 15px 20px;
z-index: 2;
color: #fff;
font-family: 'Ravi Prakash', cursive;
vertical-align: middle;
font-size: 30px;
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
.video-title {
float:left;
color: #FD1212;
}
Ссылка на демонстрацию проблемы:
joxi.ru/VrwbYWofOVZGBA
Уже часа три туплю над этим. Даже написал скрипт, который режет на 4 пикселя див, но изредка возникает глюк (сжимает нафиг див до 10 пикселей) - так что хотел бы разрешить вопрос "мирными" способами.
Заранее Спасибо за ответы, Ребят! =]
P.S. А вот код JS, кому интересно:
jQuery(function ($) {
function fix_size() {
var containers = $('.views-row');
containers.each(setsize);
function setsize() {
var con = $(this);
var h = con.height()-3;
con.height(h);
}
}
$(window).on('resize', fix_size);
fix_size();
});
Простой
