Full Width Image Hover Swap Tutorial

Design help General
1

I’m trying to create a section of project thumbnails that link to their specific Project. Similar to http://webflow.com/template/Candy . I’m sure it something simple, but I’ve spent way to much time trying to get this to work without any success. Any suggestion on how to achieve something link this?

MOD EDIT:

Changed name from: “Full Width Project Thumbnail Links?” to “Full Width Image Hover Swap Tutorial” to help others find this solution easily

2

Hey @FG1984 just use the columns widget, add background images to each one and set the height for the columns. And add a new class for each different background image. Then add Link boxes within them which you can style to your hearts desire. :slight_smile:
So your base class would be like: Background

Then each column has the Background class + another class, add the specific class name (maybe make the class name the project name) and then swap out the background image. :slight_smile:

Here’s a link to a course over adding hover interactions: http://help.webflow.com/lesson/hover-trigger-interaction

Let me know if you have any questions please. :smile:

Thanks,

Waldo

3

Thanks for responding so quickly. I have actually tried that and it basically works, however my images seem to kind of slides around inside the column instead of just scaling properly. Heres a link to my version: http://franks-stunning-site.webflow.io/ , and heres what I am going for again: http://webflow.com/template/Candy .

Thanks Again.

4

242×531 49.1 KB

Make sure to set an image as the background of the column, and set it’s size to Cover. That should do the trick :slight_smile:

I’m happy to help anytime :slight_smile:

Waldo

5

I have that checked. I swear i think i have tried just about everything. I works properly if I add a Link Block to the column and then place a image into the link block. However I cant seem to add text over the link block.

Thanks Again

6

Hey @FG1984 can you send a Read Only link over please so that we can further assist you?

Also here’s a tutorial on the hover swap items in the old User Interface: Webflow 101 | Webflow University :slight_smile:

I think I’ll make a new one of these videos if you’d like to put in a tutorial request. :smile:

Thank you,

Waldo

7

Thanks Again.
Hopefully this will help you understand what it going on.

https://preview.webflow.com/preview/franks-stunning-site?preview=1d6e84fb95b464d42fe9b1ba1026a0dc

8

Have you tried going through the tutorial from above @FG1984?

9

I have watched the tutorial… What i figured out so far is that the issue lies within using an image in the background. For example in the tutorial the image is placed into the BG of the div, which is also inside of a container, so the div is fixed in size and position. This allows you to add another div ontop of it the div containing the BG image.

If you try and do a similar thing to the image widget i wont allow you to place the div for the text overtop. It automatically places it above or blow the image widget.

Unfortunately it seems that you have to use the image widget to get the row of thumbnails to that scale properly with the width of browser.

I have created a few tests for you to view so you understand what exactly I am talking about.
https://preview.webflow.com/preview/franks-stunning-site?preview=1d6e84fb95b464d42fe9b1ba1026a0dc

10

Hey @FG1984 I went ahead and just made a quick video screen cast to walk you through setting this up. You’re on the right track and setting the image inside of a column with a div overlayed is the way to go for what you’re looking to achieve. :smile:

Please let me know if you have any questions.

Thank you,

Waldo

1 Like
11

Thanks So Much. I knew it had to be some simple button somewhere that I was missing.

1 Like
12

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