Затемнение картинки с помощью другой картинки

194

27 июля 2021, 09:40

Есть картинка, и другая как просто темная, я хочу чтобы при наведении чтобы одна оставалась такой же(основная), а вторая ложилась поверх ее и давала прозрачность, в итоге чтобы получилось как-бы затемнение

Answer 1

вторая ложилась поверх ее и давала прозрачность, в итоге чтобы получилось как-бы затемнение

Это можно реализовать через псевдоэлемент, которому задаётся черный фон и полупрозрачность.

Результат:

https://codepen.io/hisbvdis/pen/WNeKbBM

div { 
  position: relative; 
  width: 500px; 
  height: 350px; 
} 
 
div::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #000; 
  opacity: 0; 
  transition: 0.2s; 
} 
 
div:hover::before { 
  opacity: 0.4; 
} 
 
img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

<div> 
  <img src="https://picsum.photos/536/354"> 
</div>

Answer 2

хотите 2 картинки - пожалуйста

.i_am_image { 
  /* Это не нужно, это эмуляция вашей картинки */ 
  border: 1px solid grey; 
  width: 100px; 
  height: 100px; 
  position: absolute; 
  top: 0; 
  left: 0; 
} 
 
 
 
.image_wrapper { 
  position: relative; 
  padding: 50px; 
  /* Указываем размер блока картинки*/ 
} 
 
.i_am_hidden { 
  opacity: 0; 
  transition: opacity .5s; 
} 
 
.image_wrapper:hover .i_am_hidden { 
  opacity: 1; 
}

<div class="card"> 
  <div class="image_wrapper"> 
    <div class="i_am_image"> 
      Я типа картинка 
    </div> 
    <div class="i_am_image i_am_hidden"> 
      Я типа вторая картинка с лупой и еще чем то 
    </div> 
  </div> 
</div>

Блоки div.i_am_image заменяете на свои изображения или блоки с изображениями и все будет работать. И вы в них моете разместить еще что-либо