Как сдвинуть картинку и добавить фон под ней?

Question

[Олег]

На сайте в разделе в один ряд находится 3 фото, одно из них сдвинуто влево и вверх а под ним фон. Пример прикрепил.

Answer 1

[Вадим Кот]

Вопрос полностью дублирует уже решенный Как осуществить данный hover эффект?

одно из них сдвинуто влево и вверх а под ним фон

дизайнер предусмотрел состояния элемента и сделал один под hover

Answer 2

[jorshjorsh95]

что-то мне подсказывает что это box-shadow

как вариант можно абсолютно позиционированный псевдоэлемент сделать
И еще как вариант, обернуть картинку, родителю - фон, картинку - абсолютно сдвинуть

Answer 3

[Егор Живагин]

<div>
  <img>
</div>

Блоку задаёшь фон, картинке transform: translate куда нужно

Answer 4

[makinggood]

<div class="w3">
  <div class="inner active"></div>
</div>

<div class="w3">
  <div class="inner"></div>
</div>

<div class="w3">
  <div class="inner"></div>
</div>

.w3 {
  width:28%;
  margin:1%;
  min-height:150px;
  background:#999;
  float:left;
  position:relative;
}

.inner {
  position:absolute;
  min-height:100%;
  min-width:100%;
  background:#333;
}

.inner:hover, .active {
  top: -5px;
  left: -5px;
}