Organic Shape with CSS For Image Hover Effect

Question

I have a task on organic shape image I want the background color on hover like that particular organic shape image. I am not getting the hover effect on the image with the background colour. i have tried a lot but it's not coming where am i doing wrong. Can anybody point in the right direction to solve my problem? Thanks 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>

Answer 1

You can try to use a pseudo element and a mix-blend-mode to hide the color overflow:

.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>