Hover image zoom in

[ManagementX]

I would like to create a zoom effect like this: https://avada.theme-fusion.com/music/ 3 columns (live dates, meet the band, etc…) but how?

and I don’t know CSS coding, but can copy paste of course;)

[basanta]

HI There,

Thanks for writing in!
Making this type of background for column need custom CSS which is our theme support scope.
I will try to help you with some code so that you can able to do this.
Point 1. Please add a background image to the columns, with setting given below.

same repeat for all the there columns.

Point 2. To make the columns equal height make the row as marginless.

point 3. add this code to each of your element CSS of the columns

$el{
  cursor: pointer;
}
$el .x-bg-layer-lower-image{
  transition: 1s;
}
$el:hover .x-bg-layer-lower-image {
  background-size: 150% !important;
}

Hope this helps!