[vc_row max_width=”600″ min_height=”500″ content_placement=”middle” textalign=”align_center” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“mobile_landscape“:{“padding-bottom“:“60“},“tablet_portrait“:{“padding-bottom“:“100“},“desktop“:{“padding-top“:“120“,“padding-bottom“:“140“}}” custom_bg_color=”{“dir“:“135deg“,“from“:{“id“:“custom_color“,“color“:“#ee9ae5“},“to“:{“id“:“custom_color“,“color“:“rgba(89,97,249,1)“}}” overlay_color=”{“solid“:{“id“:““,“color“:““}}”][vc_column el_design=”{“desktop“:{“padding-top“:“15“,“padding-right“:“15“,“padding-bottom“:“15“,“padding-left“:“15“}}” css_animation=””][vc_heading heading_text=”Image Element” heading_wrapper=”h1″ heading_color=”{“solid“:{“id“:“custom_8548853511531338“,“color“:“#f3f4f5“}}” heading_typography=”{“variants“:“700“,“transform“:“uppercase“,“font_size“:“30px“}” responsiveness=”yes” tablet_portrait=”90″ mobile_landscape=”85″ mobile_portrait=”75″ css_animation=””][vc_empty_space height=”15px”][vc_text_element typography=”{“variants“:“300“,“font_size“:“20px“}” disable_margin=”yes” css_animation=”” color=”{“id“:“custom_3715609566673309“,“color“:“#ffffff“}”]Easy to use customizable images.[/vc_text_element][/vc_column][/vc_row][vc_row row_width=”wtbx_stretch_row_content” nav_skin=”light” consent_include=”include”][vc_column el_design=”{“desktop“:{“padding-top“:“0“,“padding-right“:“0“,“padding-bottom“:“0“,“padding-left“:“0“}}” css_animation=””][vc_section_divider style=”layered-6″ height=”100″ responsiveness=”yes” tablet_landscape=”100″ tablet_portrait=”60″ mobile_landscape=”0″ mobile_portrait=”0″ color=”{“id“:“custom_1334459184315555“,“color“:“rgba(255,255,255,1)“}”][/vc_column][/vc_row][vc_row content_placement=”middle” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“desktop“:{“padding-top“:60,“padding-bottom“:60}}”][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” width=”1/2″ css_animation=””][vc_image_element image=”5892″ alignment=”center” shadow=”shadow_large” radius=”” preloader=”” css_animation=”wtbx-anim-left-to-right-small” css_animation_easing=”wtbx_easing-natural” css_animation_duration=”wtbx-duration-1000″ css_animation_delay=””][/vc_column][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” width=”1/2″ css_animation=””][vc_heading heading_text=”Preloader animation” heading_wrapper=”h5″ alignment=”align_left” heading_typography=”{“variants“:“600“,“font_size“:“24px“}” css_animation=””][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]You can make your images be loaded only when if the user scrolls enough to see them. After the image is loaded, one of dozens fancy appearance animations will be shown.[/vc_text_element][/vc_column][/vc_row][vc_row content_placement=”middle” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“desktop“:{“padding-top“:60,“padding-bottom“:60}}” custom_bg_color=”{“solid“:{“id“:“Light background“,“color“:“#f9fafb“}}”][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” width=”1/2″ css_animation=””][vc_heading heading_text=”Control shadow and border radius” heading_wrapper=”h5″ alignment=”align_left” heading_typography=”{“variants“:“600“,“font_size“:“24px“}” css_animation=””][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]You can add small, medium or large shadow to your images to make them look better, or disable shadow. Additionally, set border-radius in pixels or percentages to fit the overall design. With all the sizing controls, you can even achieve a perfectly round image.[/vc_text_element][/vc_column][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” width=”1/2″ css_animation=””][vc_image_element image=”5893″ alignment=”center” shadow=”shadow_small” radius=”8″ preloader=”” css_animation=”wtbx-anim-right-to-left-small” css_animation_easing=”wtbx_easing-natural” css_animation_duration=”wtbx-duration-1000″ css_animation_delay=””][/vc_column][/vc_row][vc_row content_placement=”middle” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“desktop“:{“padding-top“:60,“padding-bottom“:60}}”][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” width=”1/2″ css_animation=””][vc_image_element image=”5894″ alignment=”center” shadow=”shadow_large” radius=”3px” preloader=”” css_animation=”wtbx-anim-scale-up” css_animation_easing=”wtbx_easing-natural” css_animation_duration=”wtbx-duration-1000″ css_animation_delay=”” max_width=”400″][/vc_column][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” width=”1/2″ css_animation=””][vc_heading heading_text=”Any size and aspect ratio” heading_wrapper=”h5″ alignment=”align_left” heading_typography=”{“variants“:“600“,“font_size“:“24px“}” css_animation=””][vc_empty_space][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]You can either display your image as is, or set restrict it’s size. Moreover, you can set easily set the image aspect ratio that you want your image to be, and it your image will be cropped to that ratio. Super easy and no need to use Photoshop![/vc_text_element][/vc_column][/vc_row][vc_row content_placement=”middle” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“desktop“:{“padding-top“:“120“,“padding-bottom“:“120“}}” custom_bg_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(14,17,24,1)“}}”][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” css_animation=””][vc_heading heading_text=”Hover effects” heading_wrapper=”h5″ alignment=”align_center” heading_color=”{“solid“:{“id“:“custom_3715609566673309“,“color“:“#ffffff“}}” heading_typography=”{“variants“:“600“,“font_size“:“24px“}” css_animation=””][vc_text_element typography=”{“font_size“:“18px“}” css_animation=”” color=”{“id“:“custom_color“,“color“:“rgba(255,255,255,0.5)“}”]
Easily control the hover animation of your images. Add an overlay layer with solid or gradient color fill.
[/vc_text_element][vc_empty_space][/vc_column][vc_column width=”1/3″ css_animation=””][vc_image_element image=”5895″ size_relative=”1:1″ alignment=”center” shadow=”shadow_large” radius=”3″ h_overlay=”overlay_h” overlay_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(27,35,47,0.5)“}}” image_hover=”h_shift_up” img_link=”page_link” icon=”img_icon_h” icon_position=”icon_center” icon_size=”icon_large” icon_color=”light” preloader=”” css_animation=””][/vc_column][vc_column width=”1/3″ css_animation=””][vc_image_element image=”5896″ size_relative=”1:1″ alignment=”center” shadow=”shadow_large” radius=”3″ h_overlay=”overlay_h” overlay_color=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(187,138,255,0.3)“},“to“:{“id“:“custom_color“,“color“:“rgba(255,139,185,0.3)“}}” image_hover=”h_scale_up” img_link=”page_link” icon=”img_icon” icon_position=”icon_top_right” icon_size=”icon_medium” icon_color=”light” preloader=”” css_animation=””][/vc_column][vc_column width=”1/3″ css_animation=””][vc_image_element image=”5898″ size_relative=”1:1″ alignment=”center” shadow=”shadow_large” radius=”3″ h_overlay=”overlay” overlay_color=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(255,130,107,0.9)“},“to“:{“id“:“custom_color“,“color“:“rgba(255,97,145,0.9)“}}” image_hover=”h_scale_down” img_link=”page_link” icon=”img_icon” icon_position=”icon_top_right” icon_size=”icon_medium” icon_color=”light” preloader=”” css_animation=””][/vc_column][/vc_row][vc_row content_placement=”middle” nav_skin=”light” consent_include=”include” equal_height=”true” el_design=”{“desktop“:{“padding-top“:120,“padding-bottom“:120}}” custom_bg_color=”{“solid“:{“id“:““,“color“:““}}”][vc_column el_design=”{“desktop“:{“padding-top“:15,“padding-right“:30,“padding-bottom“:15,“padding-left“:30}}” css_animation=””][vc_heading heading_text=”Clickable images” heading_wrapper=”h5″ alignment=”align_center” heading_typography=”{“variants“:“600“,“font_size“:“24px“}” css_animation=””][vc_text_element typography=”{“font_size“:“18px“}” css_animation=””]
You can set any image to perform one of the four actions on click: open a new page, open a lightbox with a larger image, open an image gallery, or open a video lightbox.
[/vc_text_element][vc_empty_space][/vc_column][vc_column width=”1/4″ css_animation=””][vc_image_element image=”5894″ size_relative=”3:4″ alignment=”center” shadow=”shadow_large” radius=”8″ h_overlay=”overlay_h” overlay_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(27,35,47,0.3)“}}” img_link=”page_link” icon=”img_icon_h” icon_position=”icon_center” icon_size=”icon_medium” icon_color=”light” preloader=”” css_animation=”” link=”url:http%3A%2F%2Fthemes.whiteboxstud.io%2Fscape%2Fmain-import%2Fimage-element%2F|||”][/vc_column][vc_column width=”1/4″ css_animation=””][vc_image_element image=”5896″ size_relative=”3:4″ alignment=”center” shadow=”shadow_large” radius=”8″ h_overlay=”overlay” overlay_color=”{“dir“:“45deg“,“from“:{“id“:“custom_color“,“color“:“rgba(187,138,255,0.8)“},“to“:{“id“:“custom_color“,“color“:“rgba(255,139,185,0.8)“}}” image_hover=”h_scale_up” img_link=”image_popup” icon=”img_icon_h” icon_position=”icon_center” icon_size=”icon_medium” icon_color=”light” preloader=”” css_animation=””][/vc_column][vc_column width=”1/4″ css_animation=””][vc_image_element image=”3705″ size_relative=”3:4″ alignment=”center” shadow=”shadow_large” radius=”8″ h_overlay=”overlay_h” overlay_color=”{“dir“:“135deg“,“from“:{“id“:“custom_color“,“color“:“#fad7a1“},“to“:{“id“:“custom_color“,“color“:“rgba(233,109,113,0.9)“}}” image_hover=”h_scale_down” img_link=”gallery_popup” images=”1765,1761,1760,1730″ preloader=”” css_animation=””][/vc_column][vc_column width=”1/4″ css_animation=””][vc_image_element image=”2184″ size_relative=”3:4″ alignment=”center” shadow=”shadow_large” radius=”8″ h_overlay=”overlay” overlay_color=”{“solid“:{“id“:“custom_color“,“color“:“rgba(0,0,0,0.5)“}}” image_hover=”h_shift_up” img_link=”video_popup” icon=”img_icon_h” icon_position=”icon_center” icon_size=”icon_medium” icon_color=”light” preloader=”” css_animation=”” iframe_link=”https://vimeo.com/103902159″][/vc_column][/vc_row]