20067 > feature > Short Codes > Image Effects

en-US

cy-GB

en-US

cy-GB

X

Image Effects

/ /

LEFT ALIGNMENT

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec

<div class="img_left">
    <img  src="/portals/37/Photo2.jpg" width="270" > 
</div>

RIGHT ALIGNMENT

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec

<div class="img_right">
    <img  src="/portals/37/Photo2.jpg" width="270" > 
</div>

CENTER ALIGNMENT

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec

<div class="img_center">
    <img  src="/portals/37/Photo2.jpg" width="270" > 
</div>

SIMPLE IMAGE HOVER

<div class="photo_box"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
        </div>
    </a>
</div>

<div class="photo_box"> 
    <a href="#">
        <div class="pic_box"> 
                <img  src="/portals/37/Photo3.jpg" >
                <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box  img_zoom"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-search"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box ico_left_enter"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-link"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box ico_right_enter"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-plus"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box ico_top_enter"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-file"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box ico_bottom_enter"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-file"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box default_show"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-play"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box ico_LeftAndRight_enter"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-search ico_left"></span><span class="fa fa-link ico_right"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box ico_TopAndBottom_enter"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-search ico_top"></span><span class="fa fa-link ico_bottom"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

Modules Development

Web Design

<div class="photo_box default_show"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="content"> 
                <span class="fa fa-play"></span>
                <h3>Modules Development</h3>
                <p>Web Design</p>
            </div>
            <div class="shade"></div>
        </div>
    </a>
</div>

Modules Development

<div class="photo_box ico_LeftAndRight_enter">
    <div class="pic_box"> 
        <img  src="/portals/37/Photo3.jpg" >
        <div class="ico">
            <h3>Modules Development</h3>
            <a href="#"> <span class="fa fa-search ico_left"></span></a> 
            <a href="#"><span class="fa fa-link ico_right"></span></a> 
        </div>
        <div class="shade"></div>
    </div>
</div>

<div class="photo_box ico_push_in">
    <div class="pic_box"> 
        <img  src="/portals/37/Photo3.jpg" >
        <div class="ico">
            <a href="#"> <span class="fa fa-search ico_left"></span></a> 
            <a href="#"><span class="fa fa-link ico_right"></span></a> 
        </div>
        <div class="shade"></div>
    </div>
</div>

Modules Development

Web Design

<div class="photo_box ico_left_rotate"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"><span class="fa fa-link search"></span></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>
            <div class="shade"></div>
        </div>
    </a> 
</div>

Modules Development

Web Design

<div class="photo_box ico_right_rotate">
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"><span class="fa fa-link ico_right"></span></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>
            <div class="shade"></div>
        </div>
    </a>
</div>

IMAGE TITLE

Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.

<div class="photo_box content_top_increment">
    <div class="pic_box">
        <img  src="/portals/37/Photo3.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 href="#" class="but">Read More</a></div>
                </div>
            </div>
        </div>
        <div class="shade"></div>
    </div>
</div>

IMAGE TITLE

Photos,Design

<div class="photo_box img_zoom ico_zoom"> 
    <a href="#">
        <div class="pic_box">
        <img  src="/portals/37/Photo3.jpg" >
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <div class="ico"><span class="fa fa-link"></span></div>
                    <h3>IMAGE TITLE</h3>
                    <p>Photos,Design</p>
                </div>
            </div>
        </div>
        <div class="shade"></div>
        </div>
    </a> 
</div>

IMAGE TITLE

Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.

<div class="photo_box  img_flip content_sytle_2">
    <div class="pic_box"> 
        <img  src="/portals/37/Photo3.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>

IMAGE TITLE

Photos,Design

<div class="photo_box content_push_in"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="content">
                <h3>IMAGE TITLE</h3>
                <p>Photos,Design</p>
            </div>
        </div>
    </a> 
</div>

IMAGE TITLE

<div class="photo_box icon_tag_push img_zoom"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico "><span class="fa fa-link ico_right"></span></div>
                <div class="content">
                <h3>IMAGE TITLE</h3>
            </div>
        </div>
    </a>
</div>

IMAGE TITLE

Photos,Design

<div class="photo_box  ico_LeftAndRight_enter content_bottom_push_in">
    <div class="pic_box"> 
        <img  src="/portals/37/Photo3.jpg" >
        <div class="ico"> <a href="#"> <span class="fa fa-search ico_left"></span></a> <a href="#"><span class="fa fa-link ico_right"></span></a> </div>
        <div class="content">
            <h3>IMAGE TITLE</h3>
            <p>Photos,Design</p>
        </div>
    </div>
</div>

IMAGE TITLE

Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.

<div class="photo_box content_bottom_push_in_2 ">
    <div class="pic_box"> 
        <img  src="/portals/37/Photo3.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>

IMAGE TITLE

Aliquam fringilla, sapien egetferas scelerisque placerat, lorem libero cursus lorem, sed sodales lorem libero eu sapien.

<div class="photo_box entirety_left_offset "> 
    <a href="#">
        <div class="pic_box"> 
        <img  src="/portals/37/Photo3.jpg" >
        <div class="ico"> <span class="fa fa-search"></span> </div>
        <div class="content">
            <h3>IMAGE TITLE</h3>
            <p>content text... </p>
        </div>
        <div class="shade"></div>
        </div>
    </a>
</div>

IMAGE TITLE

Start Your Business Here

<div class="photo_box entirety_bevel">
    <div class="pic_box">
    <img  src="/portals/37/Photo3.jpg" >
    <div class="ico"><a href="#"> <span class="fa fa-heart"></span>  </a><a href="#"> <span class="fa fa-tag"></span></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>
    <div class="shade"></div>
    </div>
</div>

<div class="photo_box ico_rotate"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-link"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

<div class="photo_box shade_zoom"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/37/Photo3.jpg" >
            <div class="ico"> <span class="fa fa-arrows-alt"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

IMAGE TITLE

Phasellus aliquet tempus ligula, mollis imperdiet massa dignissim.

<div class="photo_box content_zoom content_sytle_2"> 
        <div class="pic_box"> 
            <img  src="/portals/2/Photo3.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>

IMAGE WITH TEXT

Image Title

Web Design, Photos

<div class="photo_box  ico_right_enter  box_border_padding  ">
  <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2.jpg" >
        <div class="ico"> <span class="fa fa-plus"></span> </div>
        <div class="shade"></div>
    </div>
 </a>  
 <div class="text_sytle_1">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
 </div>
</div>

12

Image Title

Web Design, Photos

<div class="photo_box  ico_right_enter   ">
  <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2.jpg" >
        <div class="ico"> <span class="fa fa-plus"></span> </div>
        <div class="shade"></div>
    </div>
 </a>  
 <div class="text_sytle_1">
        <span class="fa fa-heart"></span>12</div>
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
 </div>
</div>

Image Title

Web Design, Photos

<div class="photo_box  ico_right_enter   ">
  <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2.jpg" >
        <div class="ico"> <span class="fa fa-plus"></span> </div>
        <div class="shade"></div>
    </div>
 </a>  
 <div class="text_sytle_2">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
 </div>
</div>

Image Title

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq uam eius modi tempora.

<div class="photo_box  ico_right_enter   ">
  <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2.jpg" >
        <div class="ico"> <span class="fa fa-plus"></span> </div>
        <div class="shade"></div>
    </div>
 </a>  
 <div class="text_sytle_3">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
        <a href="#">Read More ></a>
 </div>
</div>

Image Title

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq uam eius modi tempora.

<div class="photo_box  ico_right_enter box_border_padding  ">
  <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2.jpg" >
        <div class="ico"> <span class="fa fa-plus"></span> </div>
        <div class="shade"></div>
    </div>
  </a>  
  <div class="text_sytle_1">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
        <a href="#">Read More ></a>
  </div>
</div>

Image Title

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq uam eius modi tempora.

<div class="photo_box  ico_right_enter  ">
  <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2.jpg" >
        <div class="ico"> <span class="fa fa-plus"></span> </div>
        <div class="shade"></div>
    </div>
  </a>  
  <div class="text_sytle_4">
        <h3>Image Title</h3>
        <p> Web Design, Photos</p>
        <a href="#">Read More ></a>
  </div>
</div>

IMAGE WITH SHAPE

<div class="photo_box ico_left_enter">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2_1.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

<div class="photo_box ico_left_enter box_border_radius">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2_1.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

<div class="photo_box ico_right_enter box_border_round">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo2_1.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

IMAGE WITH BORDER

<div class="photo_box  box_border">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo6.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

<div class="photo_box  box_border_padding">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo6.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

<div class="photo_box  box_dotted_padding">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo6.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

IMAGE WITH SHADOW

<div class="photo_box  box_bottom_shadow">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo6.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

<div class="photo_box  box_bottom_shadow_left box_bottom_shadow_right">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo6.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>

<div class="photo_box  box_bottom_shadow_right">
 <a href="#"> 
    <div class="pic_box"> 
        <img  src="/portals/37/Photo6.jpg" >
        <div class="ico"> <span class="fa fa-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>