Image Box

• Posted: January 15, 2015
• / By: Julita
• / In:

Create beautiful image box with the following HTML:

CSS

<div class="ct-imageBox ct-u-paddingBoth100" data-bg-image="assets/images/demo-content/groupedMacaroons.jpg" style="background-image: url(http://macaroon.html.themeforest.createit.pl/assets/images/demo-content/groupedMacaroons.jpg);"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-imageBox-content"> <div class="ct-imageBox-innerContent"> </div> </div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11

<div class="ct-imageBox ct-u-paddingBoth100" data-bg-image="assets/images/demo-content/groupedMacaroons.jpg" style="background-image: url(http://macaroon.html.themeforest.createit.pl/assets/images/demo-content/groupedMacaroons.jpg);">                 <div class="ct-u-displayTableVertical">                     <div class="ct-u-displayTableCell">                         <div class="ct-imageBox-content">                             <div class="ct-imageBox-innerContent">                               </div>                         </div>                     </div>                 </div> </div>

And javascript:

JavaScript

$('.ct-imageBox').each(function(){ var $this = $(this); var $bg_image = $this.attr("data-bg-image"); $this.css('background-image', 'url("' + $bg_image + '")'); })

1 2 3 4 5

$('.ct-imageBox').each(function(){             var $this = $(this);             var $bg_image = $this.attr("data-bg-image");             $this.css('background-image', 'url("' + $bg_image + '")'); })

Image Box