Change background color and background image
<p>I want to change my div background color and image on hover. Just like this. </p>

<p><a href="https://i.stack.imgur.com/7Zdf4.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/7Zdf4.jpg" alt="enter image description here"></a></p>

<p>I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation? </p>

<pre><code>&lt;div class="col-md-4"&gt;
  &lt;div class="icon-wrapper"&gt;&lt;/div&gt;
     &lt;p&gt;Products&lt;/p&gt;
&lt;/div&gt;

.icon-wrapper {
    background: url("/assets/human-resources.png");
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 50%;
    transition: all 0.2s;

    img {
        top: 22%;
        left: 24%;
        position: absolute;
    }

    &amp;:hover {
        background: blue;
        background-position: center;
        background-repeat: no-repeat;
        background: url("/assets/car-white.png");
    }
}
</code></pre>