Create a website preview with scrolling background

By | CSS, Tutorials | 11 comments

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.

DIVI theme is NOT included

Purchase Divi directly at Elegant Themes and get instant 20% discount !