Как заставить изображение исчезать, не влияя на непрозрачность эффекта одновременного яркого свечения - PullRequest
Новая
       76

Как заставить изображение исчезать, не влияя на непрозрачность эффекта одновременного яркого свечения

0 голосов
/ 28 мая 2018

РЕДАКТИРОВАТЬ:

Благодаря помощи Тавкомана, теперь я получил эффекты работать так, как они должны.Я также решил проблему, которую вычеркнул ниже, установив padding контейнера каждого изображения на 0px. Надеюсь, это поможет коллегам-программистам!

Осталась только одна проблема: даже еслиизображения соответствуют соответствующим контейнерам в правильном выравнивании, они все еще не охватывают всю ширину каждого;в результате с каждой стороны остается полоса пространства.

Обновленный код: 

#main-imgs {
    margin-top: 70px;
}

/* container for each image */

#main-imgs .img-column {
    display: inline-block;      /* conform container to image size */
    overflow: hidden;           /* avoid image-border overlap */

    max-height: 215px;
    padding: 0px;               /* fit image within border */

    border-width: 8px;
    border-radius: 15%;

    border-style: double;
    border-color: #290B01;

box-shadow: 0px 0px 0px 0px black;
    transition: all .6s ease-in-out;
}

/* container hover event */

#main-imgs .img-column:hover {
    box-shadow: 0px 0px 30px 0px white;
    transition: all .6s ease-in-out;
}    

/* image */

#main-imgs img {
    vertical-align: middle;    /* rid of space beneath image */
    opacity: 1.0;
    transition: all .6s ease-in-out;
}

/* image hover event */

#main-imgs img:hover {
    opacity: 0.2;
    transition: all .6s ease-in-out;
}

ОРИГИНАЛ:

Я пытаюсь сделать изображение блеклым и одновременно, когда вы наводите курсор на черный фон.

Проблема в том, что когда он затухает, его непрозрачность уменьшается, и это влияет на все атрибуты, включая box-shadow.

. В результате непрозрачность эффекта свечения уменьшается и гасит свечение,Пока что изображение исчезает и исчезает при наведении на него и от него, соответственно.Я включил код CSS ниже.

#main-imgs img {
  max-height: 220px;

  border-width: 8px;
  border-radius: 15%;

  border-style: double;
  border-color: #290B01;

  opacity: 1.0;
  transition: all .6s ease-in-out;
}

#main-imgs img:hover {
  opacity: 0.2;
  transition: all .6s ease-in-out;
}

Я имею в виду два возможных (одновременных) решения, но еще не нашел способ реализовать одно из них:

  1. создать "подложку", a divпод изображением, которое создает свое собственное неискаженное свечение
  2. , используйте что-то, кроме псевдокласса hover и атрибута opacity, для имитации и изоляции эффекта затухания (например, используйте jQuery).

1 Ответ

0 голосов
/ 28 мая 2018

Я покажу реализацию для этого решения:

создайте «подложку», div под изображением, который создает свое собственное неискаженное свечение

Прежде всегонам нужно создать структуру для «подложки».Это просто родительский контейнер: 

<div class="img">
  <img src="URL" alt="description" />
</div>

Теперь просто добавьте border и border-radius в родительский контейнер вместо изображения.Чтобы контейнер адаптировался к размеру изображения, мы должны использовать display: inline-block.Нам также нужно установить overflow: hidden, чтобы изображение соответствовало border-radius контейнера.И последнее, но не менее важное: мы должны использовать vertical-align: middle для изображения, , чтобы внизу не было пробела .

Наконец, это приводит нас к следующему примеру кода, в котором оба, эффект затухания и свечения, работают правильно: 

body {
  background-color: #000;
}

.img {
  display: inline-block;
  border: 8px double #290B01;
  border-radius: 15%;
  overflow: hidden;
}

.img > img {
  max-height: 220px;
  opacity: 1.0;
  transition: all .6s ease-in-out;
  vertical-align: middle;
}

.img > img:hover {
  opacity: 0.2;
  transition: all .6s ease-in-out;
}
<div class="img">
  <img src="http://via.placeholder.com/100x100" alt="description" />
</div>
...