{"id":757,"date":"2021-02-08T21:19:59","date_gmt":"2021-02-08T21:19:59","guid":{"rendered":"https:\/\/ariyah.webdesignengine.com\/clean-simple\/?page_id=757"},"modified":"2021-02-16T17:07:51","modified_gmt":"2021-02-16T17:07:51","slug":"image-box","status":"publish","type":"page","link":"https:\/\/ariyah.webdesignengine.com\/classy\/image-box\/","title":{"rendered":"Image Box"},"content":{"rendered":"\n<p>Use image boxes to display content with images on top of text, image to the left, or image to the right of text. Use different hover\/rollover interactive image effects.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"bounce\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-826349-1024x682.jpg\" class=\"wp-block-getwid-image-box__image wp-image-636\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"wp-block-heading\">Bounce<\/h3>\n\n\n\n<p>Example image box with bounce animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"flash\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-774866-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-633\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"wp-block-heading\">Flash<\/h3>\n\n\n\n<p>Example image box with flash animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"pulse\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-erin-profaci-1573248-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-628\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"wp-block-heading\">Pulse<\/h3>\n\n\n\n<p>Example image box with pulse animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-image-left has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"rubberBand\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-826349-1024x682.jpg\" class=\"wp-block-getwid-image-box__image wp-image-636\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Rubber band<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with rubber band animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-image-left has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"shake\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-774866-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-633\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Shake<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with shake animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-image-left has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"headShake\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-erin-profaci-1573248-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-628\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Head Shake<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with head shake animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-12 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-image-right has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"swing\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-826349-1024x682.jpg\" class=\"wp-block-getwid-image-box__image wp-image-636\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Swing<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with swing animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-image-right has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"tada\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-774866-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-633\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-right wp-block-heading\">Tada<\/h3>\n\n\n\n<p class=\"has-text-align-right\">Example image box with tada animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-image-right has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"wobble\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-erin-profaci-1573248-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-628\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"wp-block-heading\">Wobble<\/h3>\n\n\n\n<p>Example image box with head wobble animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-16 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"jello\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-826349-1024x682.jpg\" class=\"wp-block-getwid-image-box__image wp-image-636\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Jello<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with jello animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"jackInTheBox\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-774866-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-633\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Jack In The Box<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with jack in the box animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"slideTop\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-erin-profaci-1573248-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-628\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Slide Top<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with slide top animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-20 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"slideBottom\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-826349-1024x682.jpg\" class=\"wp-block-getwid-image-box__image wp-image-636\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Slide Bottom<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with slide bottom animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"slideLeft\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-774866-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-633\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Slide left<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with slide left animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"slideRight\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-erin-profaci-1573248-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-628\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Slide Right<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with slide right animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-23 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"zoomSmall\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-826349-1024x682.jpg\" class=\"wp-block-getwid-image-box__image wp-image-636\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Zoom Small<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with zoom small animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-getwid-image-box getwid-animation has-text-center has-mobile-layout-default has-mobile-alignment-default\" data-animation=\"zoomBig\"><div class=\"wp-block-getwid-image-box__image-container is-position-top\"><div class=\"wp-block-getwid-image-box__image-wrapper\"><img decoding=\"async\" src=\"https:\/\/ariyah.webdesignengine.com\/clean-simple\/wp-content\/uploads\/2021\/02\/pexels-andrea-piacquadio-774866-1024x683.jpg\" class=\"wp-block-getwid-image-box__image wp-image-633\"\/><\/div><\/div><div class=\"wp-block-getwid-image-box__content\">\n<h3 class=\"has-text-align-left wp-block-heading\">Zoom Big<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Example image box with zoom big animation on hover.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use image boxes to display content with images on top of text, image to the left, or image to the right of text. Use different hover\/rollover interactive image effects.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/pages\/757"}],"collection":[{"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/comments?post=757"}],"version-history":[{"count":1,"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/pages\/757\/revisions"}],"predecessor-version":[{"id":1140,"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/pages\/757\/revisions\/1140"}],"wp:attachment":[{"href":"https:\/\/ariyah.webdesignengine.com\/classy\/wp-json\/wp\/v2\/media?parent=757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}