CSS HTML тег размытия изображения при наведении

Question

Я работаю на веб-сайте портала для одного из моих классов, и шаблон, предоставленный мне моим профессором, использует тег <picture>, поэтому они меняются в зависимости от размера браузера. Я хочу размыть и затемнить изображение и показать текст с указанием художника при наведении курсора.

Вы можете проверить сайт и посмотреть, как он выглядит на http://web-students.net/site41/.

Здесь мой HTML код:

<picture class="profile">
            <source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
            <source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
            <img src="images/everett.gif" alt="My sunshine who makes me very happy." />
        </picture>

И моя попытка CSS:

picture:hover > .overlay {
        background-color:#000;
        opacity:0.5;
        filter: blur(8px);
        -webkit-filter: blur(8px);

Будет ли это работать, если я поместу <picture> внутри <div> и затем применили CSS к этому? Сохранит ли это изображение отзывчивым?

Answer 1

Вы можете использовать комбинацию filter s для размытия и затемнения изображения при наведении.

Например:

picture:hover img {
  filter:blur(6px) contrast(40%);
}

Наложение является вторичным. Для этого эффекта можно использовать псевдоэлемент или фактический div.

body {
  text-align: center;
}

picture {
  margin:1em auto;
  display: inline-block;
  position: relative;
  border:2px solid green;
}

picture::after {
  content:"Author Details";
  display: flex;
  justify-content: center;
  align-items:center;
  color:white;
  font-size:2em;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .3s ease;
}

picture:hover::after {
  opacity:1;
}

img {
  transition:all.3s ease;
  display: block;
}

picture:hover img {
  filter:blur(6px) contrast(40%);
}

<picture class="profile">
            <img src="http://www.fillmurray.com/460/300" alt="My sunshine who makes me very happy." />
        </picture>

Answer 2

Вам не нужен div .overlay. Вы можете сделать это с помощью элементов до и / или после псевдо. В сочетании с атрибутом данных на картинке (см. Пример здесь ниже).

picture {
  position: relative;
}

picture:before {
  content: attr(data-author);
  display: none;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:#000;
  opacity:0.5;
  filter: blur(8px);
}

picture:hover:before,
picture:hover:after {
  display: block;
}

picture:after {
  content: attr(data-author);
  display: none;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

<picture class="profile" data-author="More info">
            <source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
            <source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
            <img src="images/everett.gif" alt="My sunshine who makes me very happy." />
        </picture>

Но, конечно, вы можете обернуть его в дополнительный div и присвоить ему абсолютное положение (и верхний правый нижний левый), чтобы он имел одинаковые размеры как родительский элемент.