DNNGo demo dnn skin unlimited color pack 036 > Features > Short Codes > Images

X

GO

en-US

cy-GB

Images

> >

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/25/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/25/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/25/Photo2.jpg" width="270" > 
</div>

SIMPLE IMAGE HOVER

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

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

<div class="photo_box  img_zoom"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-search ico_left"></span><span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-search ico_top"></span><span class="glyphicons glyph-link ico_bottom"></span> </div>
            <div class="shade"></div>
        </div>
    </a> 
</div>

Modules Development

Web Design

<div class="photo_box default_show title_style_2"> 
    <a href="#">
        <div class="pic_box"> 
            <img  src="/portals/25/Photo8.jpg" >
            <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>

<div class="photo_box ico_LeftAndRight_enter ico_sytle_2">
    <div class="pic_box"> 
        <img  src="/portals/25/Photo8.jpg" >
        <div class="ico">
            <a href="#"> <span class="glyphicons glyph-search ico_left"></span></a> 
            <a href="#"><span class="glyphicons glyph-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/25/Photo8.jpg" >
        <div class="ico">
            <a href="#"> <span class="glyphicons glyph-search ico_left"></span></a> 
            <a href="#"><span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"><span class="glyphicons glyph-link"></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/25/Photo8.jpg" >
            <div class="ico"><span class="glyphicons glyph-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/25/Photo8.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/25/Photo8.jpg" >
        <div class="content">
            <div class="vertical_center_1">
                <div class="vertical_center_2">
                    <div class="ico"><span class="glyphicons glyph-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/25/Photo8.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/25/Photo8.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/25/Photo8.jpg" >
            <div class="ico "><span class="glyphicons glyph-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/25/Photo8.jpg" >
        <div class="ico"> <a href="#"> <span class="glyphicons glyph-search ico_left"></span></a> <a href="#"><span class="glyphicons glyph-link ico_right"></span></a> </div>
        <div class="content">
            <h3>IMAGE TITLE</h3>
            <p>Photos,Design</p>
        </div>
        <div class="shade"></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/25/Photo8.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/25/Photo8.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
    <div class="ico"><a href="#"> <span class="glyphicons glyph-heart"></span>  </a><a href="#"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-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/25/Photo8.jpg" >
            <div class="ico"> <span class="glyphicons glyph-resize-small"></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/25/Photo8.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/25/Photo2.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2.jpg" >
        <div class="ico"> <span class="glyphicons glyph-plus"></span> </div>
        <div class="shade"></div>
    </div>
 </a>  
 <div class="text_sytle_1">
        <span class="glyphicons glyph-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/25/Photo2.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2_1.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2_1.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo2_1.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo6.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo6.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo6.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo6.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo6.jpg" >
        <div class="ico"> <span class="glyphicons glyph-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/25/Photo6.jpg" >
        <div class="ico"> <span class="glyphicons glyph-link"></span> </div>
        <div class="shade"></div>
    </div>
 </a>
</div>