Всем привет! У меня задача - создать слой, который "наезжает" на картинку при наведении. Я пробовал сделать это средствами CSS:
.container {
position: relative;
width: 100%;
max-width: 1150px;
margin: 0 auto;
box-sizing: border-box;
}
.border {
overflow: hidden;
position: absolute;
}
.border>img {
width: 100%;
}
.border:hover .cover {
margin-left: 0;
}
.cover {
position: absolute;
margin-left: -100%;
margin-top: 0;
width: 100%;
height: 100%;
background-color: rgba(37, 33, 33, 0.3);
transition: margin-left 0.3s;
}
.cover table {
height: 100%;
}
<div class="container">
<div class="border">
<div class="cover">
<table align="center">
<tr>
<td>
<button>OK</button>
</td>
</tr>
</table>
</div>
<img src="https://s1.it.atcdn.net/wp-content/uploads/2015/11/shutterstock_279572969.jpg" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, expedita deserunt ab obcaecati repudiandae quasi aut illo in odit necessitatibus perferendis provident temporibus mollitia placeat.</p>
</div>
Проблема в том, что у внешней рамки (border) стоит position: absolute
, и из-за этого последующие элементы ложатся под картинку.
А если убрать absolute
, то слой, который за пределами рамки, становится видным. Задать точные размеры рамки меня не устраивает, так как рамка должна подстраиваться под размер контейнера вместе с картинкой.
Можно ли это сделать средствами CSS, или надо подключать JavaScript/jQuery? Заранее огромное спасибо!
Картинок будет несколько, и разного размера. Примерно как на этом турецком сайте: ссылка
.border
изменитеposition
наrelative
и будет вам счастье)