title: How to make a smooth effect hover background-color?
body: <p>I have a block with a picture in the background when hovering over it should smoothly change the background to color. Transition not work. The icon and text should remain as is.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     .download-content {
          background-image: url("https://i.stack.imgur.com/M8HBU.jpg");
          background-color: #f60;
          background-position: center;
          background-repeat: no-repeat;
          padding: 45px;
      }
       .download-content:hover {
          background-image: none;
          background-color: #f60;
          cursor:pointer
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
      &lt;div class="download-content"&gt;
        &lt;div class="row justify-content-center"&gt;
          &lt;div class="col-lg-8"&gt;
          &lt;p&gt;Lorem&lt;/p&gt;
          &lt;p&gt;&lt;img src="https://i.stack.imgur.com/CwiZM.png" width="60" height="60"&gt;&lt;/p&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>