Органическая форма с CSS для эффекта наложения на изображения

#html #css #css3 #svg

У меня есть задача по изображению органической формы. 

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

Я много пробовал, но он не получается, где я делаю неправильно?
 Может  кто-нибудь указать  правильное направление, чтобы решить мою проблему? Заранее
спасибо...   



.at-organic-shape {
  position: relative;
  height: 500px;
  width: 500px;
}
.at-organic-shape figure img:hover {
  background-color: #6495ED;
  border-radius: 35% 80% 65% 70%/50% 65% 70% 85%;
  transition: all 0.5s linear;
}

  

    
  




    

Ответы

Ответ 1

Я всё правильно понял - есть картинка с прозрачностью (.png) и нужно её "замонохромить"
определённым цветом? Если да, то как вариант:



img {
  transition: -webkit-filter 0.4s ease-out, filter 0.4s ease-out;
}
img:hover {
  --hue: 140deg;
  -webkit-filter: grayscale(1) sepia(1) hue-rotate(var(--hue)) saturate(2);
  filter: grayscale(1) sepia(1) hue-rotate(var(--hue)) saturate(2);
}

input[type="range"] {
  -webkit-appearance: none;
  display: inline-block;
  width: 336px;
  background: hsl(180, 80%, 65%);
}
span {
  display: inline-block;
  height: 2em;
  border: 0px dotted #090;
  vertical-align: middle;
}

  

    hue-rotate(140deg)
    
  





Вся "магия" в строчке с фильтрами, остальной код для украшательства.


Ответ 2

Вы можете попытаться использовать псевдоэлемент и режим mix-blend-mode, чтобы скрыть
переполнение цвета:



.at-organic-shape {
  position: relative;
  height: 500px;
  width: 500px;
}
.at-organic-shape figure {
  position:relative;
  background:#fff;
}
.at-organic-shape figure:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  mix-blend-mode: color;
  transition: all 0.5s linear;
}
.at-organic-shape figure:hover::after {
  background:#6495ED;
}