title: Designing this card view in HTML-CSS and Bootstrap
body: <p>I have a PSD which I am converting to HTML/CSS - I have tried 4 or 5 different methods but none of them are correct - This is what the PSD card looks like, i.e. Expected result:</p>
  
  <p><a href="https://i.stack.imgur.com/uOdQ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uOdQ0.png" alt="enter image description here"></a></p>
  
  <p>This is what I have:</p>
  
  <p><a href="https://i.stack.imgur.com/EOsUZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EOsUZ.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
      &lt;div class="restaurant-box"&gt;
        &lt;div class="restaurant-box-header"&gt;
          &lt;img class="restaurant-logo-blur" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" /&gt;
        &lt;/div&gt;
        &lt;div class="restaurant-box-body"&gt;
          &lt;img class="restaurant-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" /&gt;
          &lt;div class="restaurant-box-content"&gt;
            &lt;h4&gt;Restaurant Name&lt;/h4&gt;
            &lt;span&gt;Pizza, BBQ, Kebab, Halal&lt;/span&gt;
            &lt;br/&gt;
            &lt;span&gt;RATING STARTS&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="restaurant-box-footer"&gt;
          DELIVERS IN 45 MINS
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-3"&gt;
      &lt;div class="restaurant-box"&gt;
        &lt;div class="restaurant-box-header"&gt;
          &lt;img class="restaurant-logo-blur" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" /&gt;
        &lt;/div&gt;
        &lt;div class="restaurant-box-body"&gt;
          &lt;img class="restaurant-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTDn0TxNUiy1h54cBhyyqWQI2IncNL06a4jizOls9MteYbUBfZC" alt="restaurant-logo" /&gt;
          &lt;div class="restaurant-box-content"&gt;
            &lt;h4&gt;Restaurant Name&lt;/h4&gt;
            &lt;span&gt;Pizza, BBQ, Kebab, Halal&lt;/span&gt;
            &lt;br/&gt;
            &lt;span&gt;RATING STARTS&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="restaurant-box-footer"&gt;
          DELIVERS IN 45 MINS
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.restaurant-box {
    width: 100%;
    border: 1px solid #808080;
    position: relative;
  }
  
  .restaurant-box-header {
    width: 100%;
    height: 200px;
    z-index: -1;
    position: absolute;
  }
  
  .restaurant-box-body {
    background-color: #FFFFFF;
  }
  
  .restaurant-logo {
    height: 90px;
    width: 90px;
    position: absolute;
    z-index: 10;
    top: -45px;
    margin-left: 50%;
    left: -45px;
  }
  
  .restaurant-logo-blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
  }
  
  .restaurant-box-footer {
    background-color: #e43b36;
    color: #FFFFFF;
    width: 100%;
    padding: 10px;
    text-align: center;
  }
  </code></pre>
  
  <h1>Could someone please help me set the position of the logo correctly and background blurred logo correctly? <a href="https://jsfiddle.net/2oog70up/" rel="nofollow noreferrer">JSFiddle</a></h1>