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.
|