I have a task in the image of an organic form.

I want the background color when hovering to be like an image of a certain organic form. But, I don't get the hover effect on the image with the background color.

I tried a lot, but it does not work, where am I doing wrong?
Can someone point the right direction to solve my problem? Thank you in advance...

.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; } 
 <div class="at-organic-shape"> <figure> <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1"/> </figure> </div>

  • association: stackoverflow.com/q/53445622/7394871 - Alexandr_TT
  • and you do not do perelinkovku? I look, there are not a lot of answers. And so, maybe we would have looked at the aglitsky SO, we would learn Russian)) - UModeL
  • @UModeL for us according to the program of associations only Enso -> Ru the program works in a semi-automatic mode. After the comment, the ассоциация eventually appears on Enso - "" This question is in Russian "There is no reverse procedure for RU -> Enso yet. But you can always translate your answer and place it on ENso - Alexandr_TT
  • Dice that the question is in Russian is good. But, a die would be more useful - on enSO, which is ANSWER in Russian SO)) - UModeL

2 answers 2

I understood everything correctly - is there a picture with transparency (.png) and do you need to “wrap it on” with a certain color? If yes, then as an option:

 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; } 
 <div class="at-organic-shape"> <figure> <input type="range" min="0" max="360" oninput="this.style.background = 'hsl(' + this.value + ', 80%, 65%)';document.querySelector('img').style.setProperty('--hue', this.value - 40 + 'deg');document.querySelector('span').innerText = 'hue-rotate(' + (this.value - 40) + 'deg)';"><span>hue-rotate(140deg)</span> <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1" /> </figure> </div>

All the "magic" in the line with filters, the rest of the code for decoration.

  • I gave the decision to your answer, as for a more interesting, universal option. Maybe add output hsl digits somewhere away from the picture and then you can use. as an online generator - Alexandr_TT
  • 2
    @Alexandr_TT there you need not the value of hsl , but the value for hue-rotate() , because after applying sepia() values ​​shift. Updated the answer. - UModeL

You can try using a pseudo-element and mix-blend-mode to hide color overflows:

 .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; } 
 <div class="at-organic-shape"> <figure> <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1"/> </figure> </div>