1

Всем привет! У меня задача - создать слой, который "наезжает" на картинку при наведении. Я пробовал сделать это средствами 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? Заранее огромное спасибо!

Картинок будет несколько, и разного размера. Примерно как на этом турецком сайте: ссылка

1

1 ответ 1

1

Меня уже начинает настараживать интерес именно к этой теме, за одни сутки второй раз делаю одно и тоже но по разному

песочница

смотреть на весь экран

.items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start
}

.item {
  border: 1px solid #000;
  display: inline-block;
  margin: 4px;
  position: relative;
  overflow: hidden;
}

img {
  display: block;
}

.hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.5);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: 0.34s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hidden p {
  text-align: left;
}

.item:hover .hidden {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="items">

  <div class="item">
    <div class="view">
      <img src="http://placehold.it/140x230" alt="">
    </div>
    <div class="hidden">
      <div>
        <a href=""><i class="fa fa-link" aria-hidden="true"></i></a>
        <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
      </div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p>
    </div>
  </div>
  <!--item-->

  <div class="item">
    <div class="view">
      <img src="http://placehold.it/200x230" alt="">
    </div>
    <div class="hidden">
      <div>
        <a href=""><i class="fa fa-link" aria-hidden="true"></i></a>
        <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
      </div>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p>
    </div>
  </div>
  <!--item-->

  <div class="item">
    <div class="view">
      <img src="http://placehold.it/340x130" alt="">
    </div>
    <div class="hidden">
      <div>
        <a href=""><i class="fa fa-link" aria-hidden="true"></i></a>
        <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
      </div>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p>
    </div>
  </div>
  <!--item-->

  <div class="item">
    <div class="view">
      <img src="http://placehold.it/200x200" alt="">
    </div>
    <div class="hidden">
      <div>
        <a href=""><i class="fa fa-link" aria-hidden="true"></i></a>
        <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
      </div>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, atque!</p>
    </div>
  </div>
  <!--item-->

</div>
<!--items-->

3
  • Аааааааааааааааааа!!!!!!!!!!))))))))))))))))))
    – kiten
    14 дек 2018 в 10:50
  • Спасибо!!!!!!!!!!!))))))))))))))))))))))))))))))))))
    – kiten
    14 дек 2018 в 10:50
  • палец вверх и отметить решением 14 дек 2018 в 10:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.