Streaming live at 10am (PST)

How to create hover overlay on collection items?


#1

Hi, I’m creating my web design portfolio on Webflow and have entered about 65 portfolio projects into a collection.

I am trying to display the images as a nice grid (which I’ve worked out how to do) and when you hover on each item, it will have a nice overlay with some text (client’s name and link to ‘more’) - and then when you click it, it will go to the collection detail page for case study type of info which is drawn from the same collection.

I’ve been searching high and low for somewhere to teach me how to achieve this and there seems to be instructions on how to achieve something similar to static content here:

https://webflow.com/blog/how-to-create-a-thumbnail-overlay - so I’m wanting to do this sort of style to my portfolio collection. (but this doesn’t use a collection which is so much different)

I have also seen tutorials on galleries with lightboxes which sort of is the same thing but instead of opening up a lightbox, it will just go to my collection ‘detail page’.

Could you please point me to a tutorial or instructions on how to achieve this, I am hoping there’s something out there to explain. I’d be very appreciative.

This is my plain grid display so far:

And this is my preview link:
https://preview.webflow.com/preview/darwin-web-design?preview=7672e4f520cc78f749949fbc20ba8607

Thank you!


#2

Hi

This is not yet possible with IX2, luckily we can still use IX1. I’ve made this grid for another forum member to explain grids and collections. http://cms-grid-demo.webflow.io/ On the first item I’ve added some IX1 interactions and a hover overlay.

Here’s the preview:
https://preview.webflow.com/preview/cms-grid-demo?preview=299eea56d1f020fbf74d3ca1f22f16c8
Hope the preview is enough, tell me otherwise and I’ll try to explain what I did :grinning:


#3

Hi @jorn ! Thanks so much for the link and example, I noticed the first photo in your example has the hover I’m looking for and I would like to apply this to all of my thumbnails as they will each link to their detail pages.

What does IX2 and IX1 mean?

I will study your example tomorrow and try to work it out and will let you know how I go. Thanks again !


#4

In Webflow you can design interactions to elements. Like I did in the demo. When I hover over a element that element or another starts moving and/or appear. It is called Interactions and are the last tab in your upper right in the designer. Recently Webflow released version 2 of Interactions with more functionality. Interactions 1(IX1) and Interactions 2(IX2). With IX2 your can’t yet use it on collections items but you can with IX1. Theres a switch in the designer.

Learn
IX1: https://university.webflow.com/article/intro-to-interactions
IX2: https://university.webflow.com/courses/interactions-and-animations-course

Demo: IX1: https://interactions.webflow.com
Demo of IX2:https://webflow.com/ix2


#5

Hi @jorn
I’ve carefully copied all of your style layers and have my work in progress on this page:
http://darwin-web-design.webflow.io/portfolio-test

The problem is, it displays the overlay on all of them and I can’t work out how to make it hover - also on your example it doesn’t show a link to the collection detail page. Can you advise how to do these thing or any tips appreciated.

Thank you!


#6

So, @Kulsha, I’ve updated my preview link. I’ll also try to explain what I’ve done.

My Collection Item has a background image from the collection.
Inside that item a Link Block that covers the Collection Item. The link block has a simple hover effect on the color, not from Interactions. Inside the Link Block a H1, or whatever text you prefer. The text is pulled down only to be shown when hover styled from the interactions.

The Collection Item has interactions that effects only the H1. And you need to check “Limit to nested elements” in the interaction panel so that the interaction only affects the one thats hovered.

Edit: The Link Block has Interactions, not the Collection Item.

Study my preview link, hope it helps and good luck. Ask away if is anything more you need help with.


#7

Hi @Kulsha

I helped out @ns23 with a similar query yesterday, just using the hover state and not the IX1/IX2 panel: Add text over an image when you hover over the image

Give those steps a try, just to see general construction. In terms of using in a collections list, it’s a case of as @jorn says, pulling the background image from a collection, pulling the title from the collection etc…

Hope that helps too
Stu


#8

@jorn and @StuM

Thank you so much, you have given me hope that I can do this !!
I’ll carefully study your suggestions when I have my client work done a bit later.
Much appreciated.


#9

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