Preview


Usage

<a href="#" class="media-box media-box-half">
    <img alt="" src="image.jpg">
    <div class="caption">
        <h2>Media box</h2>
        <p>
            Lorem ipsum dolore consectetur adipisicing elito sedo incididunto pertinole.
        </p>
    </div>
</a> 
<a href="#" class="media-box media-box-full">
    <img alt="" src="image.jpg">
    <div class="caption">
        <h2>Media box</h2>
        <p>
               Lorem ipsum dolore consectetur adipisicing elito sedo incididunto pertinole.
        </p>
    </div>
</a> 
<a href="#" class="media-box media-box-down">
    <img alt="" src="image.jpg">
    <div class="caption">
        <h2>Media box</h2>
        <p>
                Lorem ipsum dolore consectetur adipisicing elito sedo incididunto pertinole.
        </p>
    </div>
</a>  
<a href="#" class="media-box media-box-reveal">
    <img alt="" src="image.jpg">
    <div class="caption">
        <h2>Media box</h2>
        <h3>Lorem ipsum dolore</h3>
        <p>
                Lorem ipsum dolore consectetur adipisicing elito sedo incididunto pertinole.
        </p>
    </div>
</a> 
 

Installation

<link rel="stylesheet" href="themekit/css/media-box.css">

Settings

Name Type Description
Hidden content -- To hide the content and show it on mouse hover add the attributes data-anima="animation-name" data-trigger="hover" data-hidden="true" to the component and the class anima to the caption area of the component. For the animations list and for more details visit the animations page.
Try it Hide content
Extra field HTML Add the code <div class="extra-field">Text</div> below the title to add a extra field to the component.
Image animation -- Add the attributes data-anima="animation-name" data-trigger="hover" to the component and the class anima to the image. For the animations list and for more details visit the animations page.
Content alignment -- Add one of the following classes to the component to align the content: align-center,align-right,align-left.