Appearance

Images ​

Click to preview the Images demo. View demo

Left Alignment ​

Code:

html
<div class="img_left"><img alt="" class="img-responsive" src="/portals/13/Features-Images/images-01.jpg" /></div>

<div class="img_right"><img alt="" class="img-responsive" src="/portals/13/Features-Images/images-02.jpg" /></div>

Right Alignment ​

Code:

html
<div class="img_center"><img class="img-responsive" alt="" src="/portals/13/Features-Images/images-03.jpg" /></div>

Hover Styles ​

Code:

html
<div class="photo_box"> 
    <a href="#"> 
        <span class="pic_box"> 
            <img alt="" src="/portals/13/Features-Images/images-05.jpg" />
        </span> 
    </a> 
</div>

<div class="photo_box"> 
    <a href="#"> 
        <span class="pic_box"> 
            <img alt="" src="/portals/13/Features-Images/images-06.jpg" /> 
            <i class="shade"> </i> 
        </span> 
    </a> 
</div>

<div class="photo_box  img_zoom"> 
    <div class="pic_box"> 
     <a href="#"> 
        <img alt="" src="/portals/13/Features-Images/images-07.jpg" /> 
        <span class="ico"> 
            <i class="fa fa-search"></i> 
        </span> 
        <span class="shade"></span> 
      </a>    
    </div> 
</div>

<div class="photo_box ico_left_enter"> 
    <div class="pic_box"> 
        <a href="#">  
            <img alt="" src="/portals/13/Features-Images/images-08.jpg" /> 
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span> 
            <span class="shade"></span> 
        </a>
    </div> 
</div>

<div class="photo_box ico_right_enter"> 
    <div class="pic_box"> 
        <a href="#"> 
        <img alt="" src="/portals/13/Features-Images/images-09.jpg" /> 
        <span class="ico"> 
            <i class="fa fa-plus"></i> 
        </span> 
        <span class="shade"></span> 
        </a> 
    </div> 
</div>

<div class="photo_box ico_top_enter"> 
    <div class="pic_box"> 
        <a href="#"> 
            <img alt="" src="/portals/13/Features-Images/images-10.jpg" /> 
            <span class="ico"> 
                <i class="fa fa-play"></i> 
            </span> 
            <span class="shade"></span> 
        </a> 
    </div> 
</div>

<div class="photo_box ico_bottom_enter"> 
    <div class="pic_box"> 
        <a href="#"> 
            <img alt="" src="/portals/13/Features-Images/images-11.jpg" /> 
            <span class="ico"> 
                <i class="fa fa-play"></i> 
            </span> 
            <span class="shade"></span> 
        </a> 
    </div> 
</div>

<div class="photo_box default_show"> 
    <div class="pic_box"> 
        <a href="#"> 
            <img alt="" src="/portals/13/Features-Images/images-12.jpg" /> 
            <span class="ico"> 
                <i class="fa fa-play"></i> 
            </span> 
            <span class="shade"></span> 
        </a> 
    </div> 
</div>

<div class="photo_box ico_LeftAndRight_enter">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-13.jpg" />
        <span class="ico">
            <a href="#"> 
                <i class="fa fa-search ico_left"></i>
            </a> 
            <a href="#">
                <i class="fa fa-link ico_right"></i>
            </a> 
        </span>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box ico_TopAndBottom_enter">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-05.jpg" />
        <span class="ico">
            <a href="#"> 
                <i class="fa fa-search ico_top"></i>
            </a> 
            <a href="#">
                <i class="fa fa-link ico_bottom"></i>
            </a> 
        </span>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box default_show"> 
    <div class="pic_box"> 
      <a href="#"> 
        <img alt="" src="/portals/13/Features-Images/images-06.jpg" /> 
        <span class="content"> 
            <i class="fa fa-play"></i>
            <b class="title">Modules Development</b>
            <i class="description">Web Design</i>
        </span> 
        <span class="shade"></span> 
         </a> 
    </div> 
</div>

Modules Development ​

Code:

html
<div class="photo_box ico_LeftAndRight_enter">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-07.jpg" />
        <div class="ico">
            <h3>Modules Development</h3>
            <a href="#"> 
              <i class="fa fa-search ico_left"></i>
            </a> 
            <a href="#">
              <i class="fa fa-link ico_right"></i>
            </a> 
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box ico_push_in">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-08.jpg" />
        <div class="ico">
            <a href="#"> 
                <i class="fa fa-search ico_left"></i>
            </a> 
            <a href="#">
                <i class="fa fa-link ico_right"></i>
            </a> 
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box ico_left_rotate"> 
    <a href="#"  class="link-full" >  </a> 
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-09.jpg" />
        <div class="ico">
            <i class="fa fa-link search"></i>
        </div>
        <div class="content"> 
            <div class="vertical_center_1"> 
                <div class="vertical_center_2">
                    <h3>Modules Development</h3>
                    <p>Web Design</p>
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box ico_right_rotate"> 
    <a href="#"  class="link-full">  </a>
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-10.jpg" />
        <div class="ico">
            <i class="fa fa-link ico_right"></i>
        </div>
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <h3>Modules Development</h3>
                    <p>Web Design</p>
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

IMAGE TITLE ​

Code:

html
<div class="photo_box content_top_increment">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-11.jpg" />
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <h3 class="increment_3">IMAGE TITLE</h3>
                    <p class="increment_2 ">Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.</p>
                    <div class="increment_1"> 
                        <a class="but" href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box img_zoom ico_zoom"> 
    <a href="#" class="link-full" >   </a> 
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-12.jpg" />
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <div class="ico">
                        <i class="fa fa-link"></i>
                    </div>
                    <h3>IMAGE TITLE</h3>
                    <p>Photos,Design</p>
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box img_flip content_sytle_2">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-13.jpg" />
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <h3>IMAGE TITLE</h3>
                    <p>Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.</p>
                    <a class="but" href="#">Read More</a> 
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box content_push_in"> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-05.jpg" />
            <span class="content">
                <b class="title">IMAGE TITLE</b>
                <span class="description">Photos,Design</span>
            </span>
        </a> 
    </div>
</div>

<div class="photo_box icon_tag_push img_zoom"> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-06.jpg" />
            <span class="ico ">
                <i class="fa fa-link ico_right"></i>
            </span>
            <span class="content">
                <b class="title">IMAGE TITLE</b>
            </span>
        </a> 
    </div>
</div>

<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
    <div class="pic_box">
        <img alt="" src="/portals/13/Features-Images/images-07.jpg" />
        <div class="ico"> 
            <a href="#"> 
                <i class="fa fa-search ico_left"></i>
            </a> 
            <a href="#">
                <i class="fa fa-link ico_right"></i>
            </a> 
        </div>
        <div class="content">
            <h3>IMAGE TITLE</h3>
            <p>Photos,Design</p>
        </div>
    </div>
</div>

<div class="photo_box content_bottom_push_in_2 ">
    <div class="pic_box"> 
        <img  src="/portals/13/Features-Images/images-08.jpg" >
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <h3>IMAGE TITLE</h3>
                    <p>Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.</p>
                    <a href="#" class="but">Read More</a> 
                </div>
            </div>
        </div>
        <div class="shade"></div>
    </div>
</div>

<div class="photo_box entirety_left_offset "> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-09.jpg" />
            <span class="ico"> 
                <i class="fa fa-search"></i> 
            </span>
            <span class="content">
                <b class="title">IMAGE TITLE</b>
                <i class="description">Aliquam fringilla, sapien egetferas scelerisque placerat, lorem libero cursus lorem, sed sodales lorem libero eu sapien. </i>
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box entirety_bevel">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-10.jpg" />
        <div class="ico"> 
            <a href="#">
                <i class="fa fa-heart"></i> 
            </a> 
            <a href="#">
                <i class="fa fa-tag"></i> 
            </a>
        </div>
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <h3>IMAGE TITLE</h3>
                    <p>Start Your Business Here </p>
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

<div class="photo_box ico_rotate"> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-11.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box shade_zoom "> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-12.jpg" />
            <span class="ico"> 
                <i class="fa fa-arrows-alt"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box content_zoom content_sytle_2">
    <div class="pic_box"> 
        <img alt="" src="/portals/13/Features-Images/images-13.jpg" />
        <div class="content ">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <h3>IMAGE TITLE</h3>
                    <p>Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.</p>
                    <a href="#" class="but">Read More</a> 
                </div>
            </div>
        </div>
        <span class="shade"></span>
    </div>
</div>

Image Title ​

Code:

html
<div class="photo_box ico_right_enter  box_border_padding  "> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-05.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a>
    </div>
    <div class="text_sytle_1">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
    </div>
</div>

<div class="photo_box ico_right_enter"> 
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-06.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a>
    </div>
    <div class="text_sytle_1">
        <div class="info"> 
            <i class="fa fa-heart"></i>12
        </div>
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
    </div>
</div>

<div class="photo_box ico_right_enter">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-07.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a>
    </div>
    <div class="text_sytle_2">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
    </div>
</div>

<div class="photo_box ico_right_enter">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-08.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a>
    </div>
    <div class="text_sytle_3">
        <h3>Image Title</h3>
        <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq uam eius modi tempora.</p>
        <a href="#">Read More ></a> 
    </div>
</div>

<div class="photo_box ico_right_enter box_border_padding ">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-09.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a>
    </div>
    <div class="text_sytle_1">
        <h3>Image Title</h3>
        <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq uam eius modi tempora.</p>
        <a href="#">Read More ></a> 
    </div>
</div>

<div class="photo_box ico_right_enter">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-10.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a>
    </div>
    <div class="text_sytle_4">
        <h3><span>Image Title</span></h3>
        <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq uam eius modi tempora.</p>
        <a href="#">Read More ></a> 
    </div>
</div>

Default ​

Code:

html
<div class="photo_box ico_left_enter">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-11.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box ico_left_enter box_border_radius">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-12.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box ico_right_enter box_border_round">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-13.jpg" />
            <span class="ico"> 
                <i class="fa fa-plus"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

Image With Border ​

Code:

html
<div class="photo_box  box_border">
    <div class="pic_box"> 
	    <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-05.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box  box_border_padding">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-06.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box  box_dotted_padding">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-07.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

Image With Shadow ​

Code:

html
<div class="photo_box  box_bottom_shadow">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-08.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box  box_bottom_shadow_left box_bottom_shadow_right">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-09.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>

<div class="photo_box  box_shadow">
    <div class="pic_box"> 
        <a href="#">
            <img alt="" src="/portals/13/Features-Images/images-10.jpg" />
            <span class="ico"> 
                <i class="fa fa-link"></i> 
            </span>
            <span class="shade"></span>
        </a> 
    </div>
</div>