Banner hover effects

1. Banner #1

b6.jpgThe best new design Shop Now
b6.jpgThe best new design Shop Now
b6.jpgThe best new design Shop Now 
<div class="row">
  <div class="col-12 col-md-4">
    <div class="banner1">
      <a href="#">
        <img src="https://best.aonetemplate.com/img/cms/b6.jpg" width="370" height="240" alt="b6.jpg">
        <span>The best new design</span>
        <span class="btn btn-primary">Shop Now</span>
      </a>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="banner1">
      <a href="#">
        <img src="https://best.aonetemplate.com/img/cms/b6.jpg" width="370" height="240" alt="b6.jpg">
        <span>The best new design</span>
        <span class="btn btn-primary">Shop Now</span>
      </a>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="banner1">
      <a href="#">
        <img src="https://best.aonetemplate.com/img/cms/b6.jpg" width="370" height="240" alt="b6.jpg">
        <span>The best new design</span>
        <span class="btn btn-primary">Shop Now</span>
      </a>
    </div>
  </div>
</div>

2. Banner #2

b4.jpg
b4.jpg
<div class="row">
  <div class="col-12 col-lg-6">
    <div class="banner2">
    <a href="#"><img src="https://best.aonetemplate.com/img/cms/b4.jpg" width="570" height="224" alt="b4.jpg"></a>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="banner2">
    <a href="#"><img src="https://best.aonetemplate.com/img/cms/b4.jpg" width="570" height="224" alt="b4.jpg"></a>
    </div>
  </div>
</div>

3. Banner #3

b1.jpgShop Now
b2.jpgShop Now
b2.jpgShop Now
<div class="row">
  <div class="col-12 col-lg-8">
    <div class="banner3">
      <img src="https://best.aonetemplate.com/img/cms/b1.jpg" width="770" height="400" alt="b1.jpg" />
      <a class="btn btn-primary" href="#">Shop Now</a>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="row">
      <div class="col-6 col-lg-12">
        <div class="banner3">
          <img src="https://best.aonetemplate.com/img/cms/b2.jpg" width="370" height="190" alt="b2.jpg" />
          <a class="btn btn-primary" href="#">Shop Now</a>
        </div>
      </div>
      <div class="col-6 col-lg-12">
        <div class="banner3">
          <img src="https://best.aonetemplate.com/img/cms/b2.jpg" width="370" height="190" alt="b2.jpg" />
          <a class="btn btn-primary" href="#">Shop Now</a>
        </div>
      </div>
    </div>
  </div>
</div>

4. Banner #4

Look to love now

Nam vehicula, velit quis condimentum interdum, dui dui lacinia lectus, nec euismod ipsum ipsum quis urna.
Vestibulum ac ante at urna maximus commodo.

See more  

<div class="banner4" style="height:500px;">
  <div class="background" style="background-image:url('https://best.aonetemplate.com/img/cms/b5.jpg');"></div>
  <div class="outer">
    <div class="content">
      <h2>Look to love now</h2>
      <p>Nam vehicula, velit quis condimentum interdum, dui dui lacinia lectus, nec euismod ipsum ipsum quis urna.<br>Vestibulum ac ante at urna maximus commodo.</p>
      <p><a class="btn btn-primary" href="#">See more  <i class="caret-right"></i></a></p>
    </div>
  </div>
</div>

5. Features

WE SHIP TO
50+ COUNTRIES
30 DAYS
MONEY BACK GUARANTEE
FREE GIFT CODE
EVERY WEDNESDAYS
DAILY DEALS
& LIGHTNING DEALS
<div class="row">
  <div class="col-12 col-sm-6 col-md-3">
    <div class="feature">
      <span class="fa fa-paper-plane"></span>
      <a href="#">WE SHIP TO<br>50+ COUNTRIES</a>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-3">
    <div class="feature2">
      <span class="fa fa-retweet"></span>
      <a href="#">30 DAYS<br>MONEY BACK GUARANTEE</a>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-3">
    <div class="feature">
      <span class="fa fa-gift"></span>
      <a href="#">FREE GIFT CODE<br>EVERY WEDNESDAYS</a>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-3">
    <div class="feature2">
      <span class="fa fa-clock-o"></span>
      <a href="#">DAILY DEALS<br>& LIGHTNING DEALS</a>
    </div>
  </div>
</div>