Как заставить этот цветовой переход работать при наведении курсора на изображение? - PullRequest
Новая
       12

Как заставить этот цветовой переход работать при наведении курсора на изображение?

0 голосов
/ 04 апреля 2019

Я пытаюсь изменить цвет при наведении курсора на изображение, но не могу заставить его работать.Мне не нравятся мгновенные изменения, поэтому затухание было бы неплохо.

Я пробовал возиться с различными свойствами отображения, непрозрачности и т. Д., Но пока не повезло. 

<style>
.box {
  width: 579px;
  height: 458px;
  margin-top: 10px;
  background-image: url(http://dgeorgakas.com/img/smf-thumb.png);
  position: relative;
}

.overlay {
  position: relative;
}

.overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: none;
  z-index:0;
}

.overlay:hover:before {

    display: inline-block;
}

.green:before {
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background: rgba(60,184,120,0.9);
}
</style>

<body>
<div class="box overlay green">
</div>
</body>

https://codepen.io/anon/pen/ZZWzVK

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

...