title: Transparent layer over img when hover ++ text
body: <p>I want to add an transparent layer over my img on a card when I hover over it, I have done that part but I want it to be cut to the img and not cover the footer on the card. If that makes sence? </p>
  
  <p>this is the card with Hover. As u can see on the card, the img just covers like 90% of the card, I want the hover overlay to do the same</p>
  
  <p><a href="https://i.stack.imgur.com/SRB3k.jpg" rel="nofollow">Card when not hover IMG</a>
  <a href="https://i.stack.imgur.com/IXQ54.png" rel="nofollow">Card when hover IMG</a></p>
  
  <pre><code>   .card {
     position:relative;
     width: 350px;
     height: 335px;
     background-size: contain;
     background-repeat: no-repeat;
     background-color: #fff;
     border-radius: 5px;
     margin: 30px;
     float: left;
     }
  
     #card_oslo{
     background-image: url(img/oslo.jpg);
     }
     #card_oslo:hover{
     box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
     transition: .5s;
     }
  </code></pre>