Image

Overview

The image element can be animated and has various different style settings that can be applied, like border-radius, overlay, hover effects, etc. Images can be linked to any files or pages, and the captions text, and background, can also be styled.

View examples of the image element.

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

 [av_image src='http://localhost/enfold/documentation/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/images/placeholder.jpg' align='center' styling='' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-5bzohe'][/av_image] 

Customization

Display Image caption below the image

Add your caption text to the image element from the caption tab and use the custom CSS to display the caption text below the image.

Caption below the image.

/*----------------------------------------
// CSS - Image element
//--------------------------------------*/

#top .av-image-caption-overlay {
    height: auto;
    width: auto;    
    left: 0px;
    bottom: 0px;
    transform: translateY(100%);    
}
#top .av-image-caption-overlay-center {
  padding: 0;
}
#top .avia_image  {
  margin-bottom: 50px;
}

Image swap on hover

To swap an image with another on hover please use the below CSS and change the image URL in the code to your own image. In the image element option select the option “Always display caption” for the code to work.

/*----------------------------------------
// CSS - Image Swap
//--------------------------------------*/

.av-image-caption-overlay {
  background-position: 50% 50%;
}
.av-image-caption-overlay:hover {
  background-size: contain;
  background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
  background-color: rgba(255,255,255,0.5);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: all .0s;
}

Image border

Add a custom border to image element using the CSS below.

/*----------------------------------------
// CSS - Image border
//--------------------------------------*/
.avia-image-container img {
 border: 1px solid gray;
 padding: 5px;
}

Image border on hover

The below CSS will help you add a border effect to the image element when a user hovers the mouse over the image.


/*----------------------------------------
// CSS - Image border on hover
//--------------------------------------*/

.avia-image-container img:hover {
    border: 2px solid red;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}

Remove image alt title on hover

When you hover over images, their title (“Single Portfolio: 2/3 Gallery” in the example below) would show up.

It is a browser feature but it is possible to hide them by adding following code to Functions.php file of your child theme in Appearance > Editor

Remove the image overlay (circle and arrow )on hover

To remove the image overlay with the circle and arrow on hover please use the CSS below.

/* Remove image overlay with circle and arrow */
.image-overlay {
display: none !important;
opacity: 0 !important;
}

Prevent image or link from opening in a Lightbox

The theme has a script in place to automatically pick up video and image links and open them in a lightbox. This isn’t a one-size-fits-all solution so there is a simple way in place to prevent any single item from opening in a lightbox: adding the noLightbox class to a link will tell the script not to open the link in a lightbox no matter what it is.

For example:

Youtube

Resource

Contributed video:

Image Element Tutorial