Image Styles
- Category: Typography
- Written by Joomla!
- Hits: 9738
This is a sample page with examples on Images Wrapping into content items.
Default Image Wrap
Shadowed Image 1
Shadowed Image 2
Blue Border Image
Grey Border Image
White back description
Blue back description
Caption Image
Bubble description
Border description
Image Link 1
Image Link 2
Code
/* Default Image */ <div class="ol-typo-img-wrap"> <img src="/images/articles.jpg" alt="" /> </div> /* Shadowed Image */ <div class="ol-typo-img-wrap img-wrap-2"> <div> <img src="/images/articles.jpg" alt="" /> </div> </div> /* Shadowed Image 2 */ <div class="ol-typo-img-wrap img-wrap-3"> <div> <div> <img src="/images/articles.jpg" alt="" /> </div> </div> </div> /* Blue Border Image */ <div class="ol-typo-img-wrap img-wrap-4"> <img src="/images/articles.jpg" alt="" /> </div> /* Gray Border Image */ <div class="ol-typo-img-wrap img-wrap-5"> <img src="/images/articles.jpg" alt="" /> </div> /* Description With White Background */ <div class="ol-typo-img-wrap img-wrap-6"> <img src="/images/articles.jpg" alt="" /> <span>Your awesome description</span> </div> /* Description With Blue Background */ <div class="ol-typo-img-wrap img-wrap-7"> <span> <span>Your awesome description</span> </span> <img src="/images/articles.jpg" alt="" /> </div> /* Caption Description */ <div class="ol-typo-img-wrap img-wrap-8"> <div> <div> <img src="/images/articles.jpg" alt="" /> <span>Your awesome description</span> </div> </div> </div> /* Bubble Description */ <div class="ol-typo-img-wrap img-wrap-9"> <img src="/images/articles.jpg" alt="" /> <span><span class="img-wrap-arr"></span> Your awesome description </span> </div> /* Border Description */ <div class="ol-typo-img-wrap img-wrap-10"> <img src="/images/articles.jpg" alt="" /> <span>Your awesome description</span> </div> /* Image Link 1 */ <div class="ol-typo-img-wrap img-wrap-11"> <img src="/images/articles.jpg" alt="" /> <a href="#">Your awesome description</a> </div> /* Image Link 2 */ <div class="ol-typo-img-wrap img-wrap-12"> <img src="/images/articles.jpg" alt="" /> <a href="#">Your awesome description</a> </div>
Examples
IMG-WRAP-7 LEFT
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur..
IMG-WRAP-3 RIGHT
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem consetetur..