en-GBpl-PLbg-BG
Select the search type
  • Site
  • Web
Search

Simple Images With Radius:

Get The Code: 

              <div class="spd-row">
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">1</h6>
    <div class="spd-r-img-w spd-r-radious">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">2</h6>
    <div class="spd-r-img-w spd-r-radious">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">3</h6>
    <div class="spd-r-img-w spd-r-radious">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">4</h6>
    <div class="spd-r-img-w spd-r-radious">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
</div>

Simple Images:

Get The Code: 

              <div class="spd-row">
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">1</h6>
    <div class="spd-r-img-w"><img alt="" src="/portals/0/../../images/meetOurTeam-03.jpg"></div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">2</h6>
    <div class="spd-r-img-w">
      <div class="spd-r-img-with-overlay "><a class="spd-img-link" href="#"><img alt="" src="/portals/0/../../images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"></span></a></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">3</h6>
    <div class="spd-r-img-w spd-img-hover-zoom">
      <div class="spd-r-img-with-overlay "><a class="spd-img-link" href="#"><img alt="" src="/portals/0/../../images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"></span></a></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">4</h6>
    <div class="spd-r-img-w">
      <div ><img alt="" src="/portals/0/../../images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
</div>

Images With Hover Effects: 01

Get The Code: 

          
          <div class="spd-row">

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-one spd-margin-bottom-20 "> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-one spd-margin-bottom-20"> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-one spd-margin-bottom-20"> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-one spd-margin-bottom-20"> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

</div>

Simple Images in Circle:

Get The Code: 

          <div class="spd-row">
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">1</h6>
    <div class="spd-r-img-w spd-r-radious-f">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">2</h6>
    <div class="spd-r-img-w w spd-r-radious-f">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">3</h6>
    <div class="spd-r-img-w w spd-r-radious-f">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
  <div class="spd-col-sm-3 spd-column-fix" >
    <h6 class="spd-weight-600">4</h6>
    <div class="spd-r-img-w w spd-r-radious-f">
      <div ><img alt="" src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg"> <span class="spd-img-overlay spd-img-overlay-dark"><span class="spd-caption-centered"><span><a href="#"><span class="spd-caption-icon icon-search"></span></a></span></span></span></div>
    </div>
  </div>
</div>

Images With Hover Effects: 02

Get The Code: 

         
          <div class="spd-row">

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-two spd-margin-bottom-20 "> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-two spd-margin-bottom-20"> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-two spd-margin-bottom-20"> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

  <div class="spd-col-sm-3">

    <div class="spd-r-view spd-r-image-effect-two spd-margin-bottom-20"> <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" alt="">

      <div class="mask"> <a href="#" class="info"> <i class="fa fa-search"></i></a> </div>

    </div>

  </div>

</div>

Images With Hover Effects: 02 in a Circle

Get The Code: 

          <div class="spd-row">

<div class="spd-col-sm-3" >
<div class="spd-r-view-r spd-r-image-effect-two-s">
        <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" />
        <div class="mask">
            <a href="#" class="info"><i class="fa fa-search"></i></a>
        </div>
    </div>
</div>
<div class="spd-col-sm-3">

    <div class="spd-r-view-r spd-r-image-effect-two-s">
        <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" />
        <div class="mask">
            <a href="#" class="info"><i class="fa fa-search"></i></a>
        </div>
    </div>    
</div>
<div class="spd-col-sm-3">
    <div class="spd-r-view-r spd-r-image-effect-two-s">
        <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" />
        <div class="mask">
            <a href="#" class="info"><i class="fa fa-search"></i></a>
        </div>
    </div>
</div>
<div class="spd-col-sm-3">
    <div class="spd-r-view-r spd-r-image-effect-two-s">
        <img src="/Portals/_default/Skins/Shadhin/images/meetOurTeam-03.jpg" />
        <div class="mask">
            <a href="#" class="info"><i class="fa fa-search"></i></a>
        </div>
    </div>
</div>   
</div>

Bootstrap defaul Images

Add classes to an <img> element to easily style images in any project. 

<img src="/portals/0/..." class="img-rounded">
        <img src="/portals/0/..." class="img-circle">
        <img src="/portals/0/..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

bflix