CSS - Change Div background color depending on an image color inside the same Div

Question

I want to change the background color of a div when hover over it, depending on an icon inside the same div.

Do someone know what to use (CSS, Bootstrap ...) to do it in easy way, and how?

That is an example link: https://appsource.microsoft.com/en-us/marketplace/apps

And that is a picture if you don't want to open the link:

Answer 1

The effect you're looking for is possible by re-using the exact same image enlarged a few times (~10), overlapped with position:absolute with a huge blur factor, while trimming its overflow:

.card { 
  height: 250px;
  width: 150px;
  margin: 1rem;
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 6px;
}
.top-bar {
  padding: 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.top-bar img {
  width: 36px;
  z-index: 1;
  position: relative;
}
.top-bar img.blur {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 512px;
  filter: blur(51.2px);
  opacity: .07;
}
.card:hover img.blur {
  opacity: .42;
}

<div class="card">
  <div class="top-bar">
    <img src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
    <img class="blur" src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
    <img class="blur" src="https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://fastly.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
    <img class="blur" src="https://fastly.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
  </div>
</div>

You can further improve this by adding a JS that simply copies the <img> on the fly and applies class .blur to it (so you don't have to manually add two images to each card).

Note css-filters don't yet have full browser support.
In the example you linked, the blur is done using SVG <filter> (slightly better browser support) and a <feGaussianBlur>, but the principle is the same.