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:
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 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.
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 !
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.
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.
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.
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…
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.
