Tint

<style>
    div {
        position: relative;
        height: 600px;
        width: 450px;
    }

    .tint {
        padding: 20px;
    }
</style>

<div class="">
    <img class='img--bg layer-1' src="https://www.wantedinrome.com/i/preview/storage/uploads/2019/01/starbucks-vatican-rome.jpg" alt="">
    <div class="tint layer-2"></div>
</div>

<div class="">
    <img class='img--bg layer-1' src="https://www.wantedinrome.com/i/preview/storage/uploads/2019/01/starbucks-vatican-rome.jpg" alt="">
    <div class="tint tint--darker layer-2"></div>

</div>

<div class="">
    <img class='img--bg layer-1' src="https://www.wantedinrome.com/i/preview/storage/uploads/2019/01/starbucks-vatican-rome.jpg" alt="">
    <div class="tint-lighter layer-2"></div>
</div>
<style>
  div{
    position: relative;
    height: 600px;
    width: 450px;
  }
  .tint {
  padding: 20px;
  }
</style>


<div class="">
  <img  class='img--bg layer-1' src="https://www.wantedinrome.com/i/preview/storage/uploads/2019/01/starbucks-vatican-rome.jpg" alt="">
  <div class="tint layer-2"></div>
</div>

<div class="">
  <img class='img--bg layer-1'
    src="https://www.wantedinrome.com/i/preview/storage/uploads/2019/01/starbucks-vatican-rome.jpg" alt="">
  <div class="tint tint--darker layer-2"></div>


</div>


<div class="">
  <img class='img--bg layer-1'
    src="https://www.wantedinrome.com/i/preview/storage/uploads/2019/01/starbucks-vatican-rome.jpg" alt="">
  <div class="tint-lighter layer-2"></div>
</div>
/* No context defined for this component. */

There are no notes for this item.