0

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

Хочу сделать картинку слева такой после наведения, как справа

2 ответа 2

3

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

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

Результат:

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>

2
  • 1
    @Максим Горщевский, мой ответ минусуют. Я неправильно понял Ваш вопрос?
    – hisbvdis
    14 сен 2019 в 11:54
  • 2
    ему очевидно не хватает иконок типа ссылка и лупа 15 сен 2019 в 2:42
1

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

хотите 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 заменяете на свои изображения или блоки с изображениями и все будет работать. И вы в них моете разместить еще что-либо

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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