How to get another paralax image to appear in bottom 2 modul

Current code

Code: Select all

<p>Fusion Direct Marketing is the expert in leveraging unmatched power on media airwaves &amp; the Internet. Our Marketing Strategy produces $3.5 BILLION ANNUALLY in new sales for our dealerships. Over FIVE MILLION TIMES we’ve generated viable, qualified, local traffic for some of North America’s most notable dealerships. Using the media’s unrivaled reach, the World Wide Web’s explosive growth, and our record-setting expertise in monetizing digital advertising, Fusion Direct Marketing is able to offer clients the lowest price per new customer anywhere in the nation, resulting in an unfathomably high ROI.</p>
<p class="gk-avatar"><img alt="" src="images/demo/chef_avatar.jpg" /><strong>FDM</strong>
</p>
<p><img class="gk-description-left-img" alt="" src="images/demo/restaurant_left_bg.png" data-scroll-reveal="enter left over .5s" /><img class="gk-description-right-img" alt="" src="images/restaurant_right_bg.png" data-scroll-reveal="enter right over .5s after .25s" />
</p>

Hi

Please send me an URL and access to your site and a path to image. I'll try to make it for you.

sent to your inbox

Hi

Please send me an URL and access to your site and a path to image. I'll try to make it for you.

Hi

I have disabled editor in user settings to be able to make changes to module's html. Than I've used this code for images:

Code: Select all

<img src="images/demo/restaurant_left_bg.png" alt="" data-scroll-reveal="enter left over .5s after .25s" class="gk-description-left-img" />
<img src="images/restaurant_right_bg.png" alt="" data-scroll-reveal="enter right over .5s after .25s" class="gk-description-right-img" />


basicaly same You had, but with " after .25s" value to see the slideing.

Last step was to add this code to override after setting override in template settings:

Code: Select all

.gk-description-left-img {
    bottom: 50px;
    top: auto;
}


Hi

I have disabled editor in user settings to be able to make changes to module's html. Than I've used this code for images:

Code: Select all

<img src="images/demo/restaurant_left_bg.png" alt="" data-scroll-reveal="enter left over .5s after .25s" class="gk-description-left-img" />
<img src="images/restaurant_right_bg.png" alt="" data-scroll-reveal="enter right over .5s after .25s" class="gk-description-right-img" />


basicaly same You had, but with " after .25s" value to see the slideing.

Last step was to add this code to override after setting override in template settings:

Code: Select all

.gk-description-left-img {
    bottom: 50px;
    top: auto;
}


That's exactly what I wanted except I still wanted an image to come in at the top left also. So there would be three images that slid in. One top left, one bottom left and one bottom right. Is that possible?

Hi

That would be a little harder, but let's try

HTML:

Code: Select all

<img src="images/demo/restaurant_left_bg.png" alt="" data-scroll-reveal="enter left over .5s after .25s" class="gk-description-left-img" />
<img src="images/demo/restaurant_left_bg.png" alt="" data-scroll-reveal="enter left over .5s after .25s" class="gk-description-left-img to-bottom" />
<img src="images/restaurant_right_bg.png" alt="" data-scroll-reveal="enter right over .5s after .25s" class="gk-description-right-img" />


CSS:

Code: Select all

.gk-description-left-img.to-bottom {
    bottom: 50px;
    top: auto;
}