Do It Yourself
I have received a couple of questions in regards to the scrolling theme previews.
If you like to implement this on your own website, follow these 3 simple steps.
Step 1
First you’ll need to upload the background image you want to use to your media library and copy the link.
Step 2
Copy and Paste the html code below into a Text or Code module and replace the image link with the url you have just copied from your media library. You can also link the background image to an external site or page, change the url to your needs.
<div class="ct-scrolling-screenshot-wrapper">
<a href="https://candythemes.com/themes/photography/" class="theme_page_link">
<div class="ct-scrolling-screenshot"><span class="image-bg"><span class="image-shop-scroll" style="background-image: url('https://www.candythemes.com/wp-content/uploads/2016/01/photography-full.jpg');"></span></span></div>
</a>
</div>
Step 3
Copy and Paste the css code below to your Divi Theme Options > Custom CSS panel or add it to your child theme style.css.
.ct-scrolling-screenshot .image-bg {
height: 400px;
display: block;
position: relative;
}
.ct-scrolling-screenshot .image-bg .image-shop-scroll{
background-position: center 0;
background-repeat: no-repeat;
position:absolute;
height: 400px;
top: 0px;
left: 0;
right: 0;
margin: auto;
background-size: 100%;
}
.ct-scrolling-screenshot .image-bg .image-shop-scroll{
transition: all 15s ease-out 0s;
-webkit-transition: all 15s ease-out 0s;
-moz-transition: all 15s ease-out 0s;
-ms-transition: all 15s ease-out 0s;
-o-transition: all 15s ease-out 0s;
}
.ct-scrolling-screenshot .image-bg:hover .image-shop-scroll{
background-position: center 100%!important;
}
Step 4
All finished, go and see the result on your webpage. Enjoy.
Excelent work!
I was looking around for this function more than a month.
Cool, hope you can use it
Really cool tut. I will use it on my portfolio, half size. Thanks!
I am looking for a simple trick that fails every time I try on Divi :/ I’d like to have the fullwidth header background image zooming slowly like this : https://www.cinematicorchestra.com/
Kjell,
It’s great a work. It will be excellent to use it in my profile page.
Thanks.
Brilliant, I can’t wait to dive into this! Skillz.
Thank you so much for your great themes!
And for this tutorial. Here I face a little problem, maybe you can help me.
I tested the code on a blank page. There it works perfect. But not in Divi.
I use the “Bare Bones for Divi” child. I added the css to the Divi theme options. But it doesn´t work. I also tried the “Integartion Tab”
Maybe it is important to say that I want to use the sreen on a poject.
Do you have an idea?
Hi Sonja, thanks for your nice comment.
This “scrolling” effect should work on any theme.
Please contact me over at info@candythemes.com and provide me with an url so I can take a look and help you out with this.
Hi Can you check your download link on this page – it does not seem to be working any more – would really like to try to get this code and learn how to do this. thanks!
Hi you are correct there was a typo in the link, fixed now !
Many thanks for fixing and of course for the code to do this!
No problem, thank you for letting me know. If you can improve the code please feel free to post your changes. Have fun.