JKIT-Image Box

Image Box A grid containing an image, title, and description with a hover-scale animation. In this section, we will show you how to use JKIT-Image Box

The guide is separated into the sections below. Click on it to navigate to the designated section.

1. Activate JKit Button (#)
2. Adding JKit Image Box to Page (#)
3. Content Setting (#)
4. Style Setting (#)

Activate JKit Button

Before starting, please make sure the Jkit element is already activated on Jeg Elementor Kit Dashboard → Elements

Adding JKit Icon Box to Page

to add a JKit Icon Box to your page you can open Elementor on your page after Elementor opened you can search for “Image” on the sidebar and you can drag out the JKIT – Image Box

Content Setting

There are several options included in the Jkit Item Box content setting that you can adjust according to your need

1. Chose Image
   select an image for the imageb box
2. Image Size
   select image size
3. Content Style
   choose the content style mode
4. Equal Height
   This tool works for the content image box according to the size of the container
   
5. Image Position
   choose an image placement
6. Enable Link
   add url links

1. Title
   provide a title in the text box
2. Title HTML Tag
   replace html tag
   
3. Title Icon
   selecting the boximage icon
4. Title Icon Position
   choose icon position
5. Description
   add a description to the image box
6. Alignment
   selects the position of the word in the image box
7. Enable Hover Border Bottom
   add a bottom border hover

1. Enable Button
   add a button to the Image Box

Style Setting

You can adjust the style of the button as you like, JKit button style settings are separated into several groups. Click on it to navigate to the designated group

• Image (#)
• Body (#)
• Container (#)
• CSS BOX (#)

Image

1. Pading
   Choosing a icon image size to make the main menu neater
2. Border Radius
   smoothing the edges of the image
3. Width
   set the size of the image with certain values
4. Height
   set the height of the image
5. Object Fit
   determine the size type
6. Normal
   
   • Normal Opacity
     to transfer the image
7. Hover

• • Hover Opacity
    to transfer the image on active hover
  • Hover Scale
    a little zoom on active hover
  • Hover Animation
    provide animation effects

Body

1. Background Type
   add background to the description box
2. Border Type
   add a border to the description box
3. Box Shadow
   Sets the shadow on the box
4. Padding
   give free space
5. Border Radius
   set each corner with specific values
6. Margin
   gives free space in the image box
7. Icon Font Size
   set the size of the title icon
8. Icon Speacing
   gives the distance between the title icon with the title
9. Normal
   
   • Normal Color
     change the color of the tiles
   • Normal Icon Color
     change the title icon color
10. Hover
    • Normal Color
      change the color of the tiles when Hover active
    • Normal Icon Color
      change the title icon color when Hover active
11. Margin
    gives free space in the image box
12. Typography
    choose a font type
13. Normal
    • Normal Color
      choose the color of the fonts
14. Hover
    • Hover Color
      choose the color of the fonts when hover active

Container

1. Hover Animation
   choose the animation for the image box

Css Box

1. Custom CSS
   You can additional CSS on this box