I’m in quite a few Showit Facebook groups and I consistently see this question come up so thought I’d do a little tutorial to explain the process that I use on our Shop page when you hover over the screen of one of our templates and the screen scrolls down.

Better with video? Click here to watch the tutorial video.

Step 1: Take a full length screenshot

In order for this to work properly, the first thing you’ll do is take a full screen screenshot of the site you’re working on. I use a Chrome Extension called GoFullPage that I have added to my browser.

Once installed and Active on your browser you can navigate to the page you’re trying to take a full screenshot of. I like to also turn off any ads or pop ups or anything like that could get captured in the screenshot. In our templates, I X out of the BUY NOW tag that appears, or any popups that come up as you scroll all the way down the page.

Step 2: Insert image into your design

Once you have your screenshot, you’ll use this to place the image into your Showit site.

I have an image that is JUST the computer screen, and then I place my image right over the top where the screenshot will show. I make sure that everything is all lined up properly the way it would appear if the image was of the design inside of that laptop. Now, remember the image we loaded is super long so by default that image is only going to show what is right in the middle of the screenshot. I want to make sure that the image is showing the top part, so I’ll select the image and on the right side of the screen under the Image tab, I change the Position to 0%. This way the image only shows the top.

Step 3: Preview your design and get the right selector

Once we have our design in place, we want to preview it so we can use our Inspector tool to get the CSS Selector we need to write a teensy bit of custom CSS code to make this hover affect happen.

Once you’re previewing the Desktop version of the page you’re working with, you can right click inside your browser and choose Inspect. I click the little icon in the top left of this box that comes up (looks like a box with an arrow in it) and this will allow me to click around my screen and specifically select an element. What I’m looking for with this is the CSS selector JUST for the image that I want to hover over. So using this tool, I click the icon, then I hover over the image and click. Once I do this, I’ll get the css selector in the list at the bottom of the screen. See my screenshot below:

Now that I’m here, I copy the selector I see over there on the right that looks like: .d .sie-set-of-2_1 .se-img

If you’re not following this section, I highly recommend scrolling down and watching the tutorial for this as I show you and explain a little more about how to do this.

Step 4: Place your CSS code

Once you have the selector, you can now use the CSS I’m going to provide you to make this work!

In the first part of the code below, you’ll replace where you see:

.d .sie-set-of-2_1 .se-img:hover

with the selector you take from Step 3. Then at the end you’ll add :hover to make sure that this part only affects the image when you hover over it.

Next, we have to set our transition with the next set of css code. You’ll replace the top part of the second bit of code that looks like this:

.d .sie-set-of-2_1 .se-img

with your own that you copied from Step 3.

.d .sie-set-of-2_1 .se-img:hover {
    background-position: 0 100%;
}

.d .sie-set-of-2_1 .se-img {
    -webkit-transition: background-position 6s;
    transition: background-position 8s;
        transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

Once you have that nailed down, you’ll place your code in the “Advanced Settings” area inside Showit. This is found when editing a page when only that page is selected. So make sure you click on the page title and not an actual canvas for this to show up.

Once you paste that code in there, you can preview to see if it’s working for you!

If you have more than one design element to hover over, you can continue to add more CSS selectors to your list and it will look like this:

.d .sie-set-of-2_1 .se-img:hover,
.d .sie-set-of-2_9 .se-img:hover {
    background-position: 0 100%;
}

.d .sie-set-of-2_1 .se-img,
.d .sie-set-of-2_9 .se-img {
    -webkit-transition: background-position 6s;
    transition: background-position 8s;
        transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

You’ll simply stack them and separate them with a comma so they are all read properly.

Important Note: If you change the canvas name at any point after you’ve placed your CSS code, the code will break as that name changes the CSS selectors. I recommend making sure you have everything named the way you want it before grabbing selectors and doing the CSS portion of this tutorial.

Do better with video? This tutorial is a little technical, so feel free to watch the video below that shows you and explains in more detail how to achieve this!