Image hovers are a simple way to add a nice hover effect to your images. By wrapping them around the shortcode “image_hover” The following effects can be created. Image hovers accept links and other shortcodes attached to the image. See further examples for more info.
[padding size=”10″]These are the attributes image_hover can take:
- style: Choose a predefined style for your hover. The style will define what will appear upon hovering
Options: zoom, go, link, play, mail, facebook, doc, audio — Default: zoom - icon: Insert here the full URL for a custom icon. This icon will be centered aligned.
- align: Whether to align the image left or right. Useful when using within blocs of text.
Options: left, right — Default: none
Basic Usage
[sourcecode language=”plain”][[image_hover style=”…” icon=”” align=””]
[/image_hover]][/sourcecode]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”zoom”[/header] [padding size=”20″] [image_hover style=”mail” icon=””]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”mail”[/header]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”go”[/header] [padding size=”20″] [image_hover style=”facebook” icon=””]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”facebook”[/header]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”link”[/header] [padding size=”20″] [image_hover style=”doc” icon=””]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”doc”[/header]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”audio”[/header] [padding size=”20″] [image_hover style=”mail” icon=””]
[/image_hover] [header style=”fancy1″ type=”h6″]style=”mail”[/header]
[/image_hover]
[/image_frame][get_the_code][sourcecode language=”plain”][[image_frame style=”1″ caption=”…”]
[image_hover style=”zoom”]
[/image_hover]
[/image_frame]][/sourcecode][/get_the_code]
[/image_hover][/image_frame]
[get_the_code][sourcecode language=”plain”][[image_frame style=”4″ caption=”…”]
[image_hover style=”go”]
[/image_hover] [/image_frame]][/sourcecode][/get_the_code]
[/image_hover]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut luctus neque. Aenean interdum arcu dictum arcu auctor gravida. Mauris id nunc eros. Etiam ultricies erat eu augue ornare sodales. In hac habitasse platea dictumst. Ut posuere neque at sapien ornare nec auctor nibh venenatis. Aenean lobortis neque eu metus vehicula gravida. Pellentesque nulla nisi, porta eu ultrices id, volutpat et orci. Nullam egestas suscipit odio sit amet semper. Fusce ultrices rutrum lacus non pretium.
[image_hover style=”go” align=”right”]
[/image_hover]Praesent nunc tellus, varius ut tempor non, gravida vel mauris. Fusce placerat, sapien a aliquet cursus, elit eros tincidunt libero, sed ornare tellus erat vel tortor. Duis placerat feugiat pharetra. Etiam tempor turpis sit amet odio placerat tincidunt. Aliquam tincidunt, mi eget eleifend condimentum, lorem arcu congue ligula, quis fermentum mi erat ac quam. Pellentesque varius cursus tellus. Ut ut augue massa, et porta diam. Sed vel diam non quam blandit congue at sit amet nisl. Integer pellentesque aliquam sem nec semper. Morbi fringilla elementum urna, vitae mollis magna viverra eu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut luctus neque. Aenean interdum arcu dictum arcu auctor gravida. Mauris id nunc eros. Etiam ultricies erat eu augue ornare sodales. In hac habitasse platea dictumst. Ut posuere neque at sapien ornare nec auctor nibh venenatis. Aenean lobortis neque eu metus vehicula gravida. Pellentesque nulla nisi, porta eu ultrices id, volutpat et orci. Nullam egestas suscipit odio sit amet semper. Fusce ultrices rutrum lacus non pretium.
[padding size=”10″] [get_the_code][sourcecode language=”plain”][[image_hover style=”go” align=”left/right”][/image_hover]][/sourcecode][/get_the_code]