Layout - Shortcodes: Overlay
Thursday, April 30, 2015 8:49 AMShortcodes
[intense_overlay]
Description
The overlay shortcode is used to add an overlay that will show when the user hovers over the image. You can add your own content to show as part of the overlay. Some examples of content you could add include: icons, buttons, text, etc.
Attributes
| Attribute | Type | Dialog Title | Description | Default | Available Values |
|---|---|---|---|---|---|
| id | text | ID | optional - used to set the client-side ID | ||
| image | image | Image | enter a WordPress attachment ID or a URL | WordPress ID or any URL | |
| image_size | image_size | Image Size | full | ||
| title | text | Title | |||
| split_title | checkbox | Split Title | splits the title and bolds part | 1 | 1 = true, 0 = false |
| link | text | Link | URL, post ID, or page ID to direct the user to when clicked | ||
| subtleeffect | dropdown | Subtle Effect | - apollo - Apollo bubba - Bubba chico - Chico dexter - Dexter duke - Duke goliath - Goliath hera - Hera honey - Honey jazz - Jazz julia - Julia kira - Kira layla - Layla lily - Lily marley - Marley milo - Milo ming - Ming moses - Moses oscar - Oscar phoebe - Phoebe romeo - Romeo roxy - Roxy ruby - Ruby sadie - Sadie sarah - Sarah selena - Selena steve - Steve terry - Terry winston - Winston zoe - Zoe | ||
| class | text | CSS Class |
Examples
[intense_row]
[intense_column size="4" medium_size="4" small_size="12" extra_small_size="12"]
[intense_overlay image="3172" image_size="medium500" title="Start Your Adventure" subtleeffect="apollo"]
<a href="#">[intense_icon source="metrize" type="arrow-curve-right" width="30" color="#fff"]</a> <a href="#">[intense_icon source="metrize" type="social-sharethis" width="30" color="#fff"]</a>
[/intense_overlay]
[/intense_column]
[intense_column size="4" medium_size="4" small_size="12" extra_small_size="12"]
[intense_overlay image="3106" image_size="medium500" subtleeffect="ruby"]
[intense_button link="#" border_radius="200px 200px 200px 200px"]
View More
[/intense_button]
[/intense_overlay]
[/intense_column]
[intense_column size="4" medium_size="4" small_size="12" extra_small_size="12"]
[intense_overlay image="2184" image_size="medium500" subtleeffect="sadie" title="Be More"]
Share with your friends
<a href="#">[intense_icon source="flat-social-multicolor" type="facebook" width="30"]</a> <a href="#">[intense_icon source="flat-social-multicolor" type="twitter" width="30"]</a> <a href="#">[intense_icon source="flat-social-multicolor" type="linkedin" width="30"]</a>
[/intense_overlay]
[/intense_column]
[/intense_row]