Two column hero images on home page?

Support
#1

I believe this site is built with X Theme: http://fenetex.com/ Can you possibly explain how this two-column homepage feature was created? https://www.screencast.com/t/1ySilAzc

I’m an X-Pro user and would appreciate any guidance on how to create a similar feature. Thank you in advance for your assistance!

Brian

#2

Hi Brian,

Thank you for writing in, first add that top section on your page and Remove the Spacing of that section.



Then make that Section a two Column



Then inspect each of that 1/2 column and set a background-image on it.



You can now then add a Headline element or any element on that Column.

Hope it helps,
Cheers!

#3

Thank you! Your explanation is great and I really appreciate the detail!!!

#4

You are most welcome!

#5

One more question. Any idea how they created the image motion on mouse-over on the fenetex.com site? Is this done with features in X Pro? Thanks again for your help!

#6

Hi Brian,

No, it’s not a feature of the PRO theme. but we can do that with a custom CSS. To do this, first, add a CLASS zoom-bg to your Section.



Then add this to the Page > CSS

.zoom-bg .x-column .x-bg-layer-lower-image {
  max-width: 100%;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.zoom-bg .x-column:hover .x-bg-layer-lower-image {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

The image needs to be a lower layer background of the column.

Hope it helps,
Cheers!

#7

Thanks! Works perfectly!!! Your support is absolutely awesome!

#8

You’re most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.