Streaming live at 10am (PST)

How to create this mouse-over effect?


#1

Greetings,

I really like the design of this page (made in webflow):
http://www.nicknameddesign.com/

  • How can I recreate the mouse-over effect in the "ICONick" Section?
  • And how can I make sure that the images in this grid are scaled down and not cropped?

Thank you for any help!


#2

Okay, some aspects are solved: I found this tutorial - missed it before:
http://tutorials.webflow.com/show-content-on-hover

But the div isn´t clickable, yet. How can I link this hole image /div to something?

Thank you.


#3

To add a link to anything in Webflow, drag a Link Block widget from the Add Panel and drag your element inside it. You can now set the link on the Link Block widget.

Also, you may want to use the Link Block widget without setting a link to wrap any element you've put an Interaction with a Click trigger on, so that you get the hand cursor on :hover.


#4

Cool, this helps alot. Thank you, vincent. Works great.

Just my second question remains:
How can I create a grid-like column with images, that stay proportional when I resize the browser?
(see http://www.nicknameddesign.com/)


#5

Check my demo here (green link on the right is the public link) http://sab.webflow.com/image-distortion

Make your images 100% width.


#6

Sorry for maybe hijacking this thread but...

Like in nicknameddesign.com, I want a gallery of link-images with a hover on top of it. But instead of two, i want three in a row. But I seriously can't make it to work properly. I NEVER get my images to fill up the div. Images i'm using is 960x480px and I set them as backgrounds in to a link block inside a row of 3 columns..

So, I'm using a row of 3-columns (each col is approx. 33,333% width), then adding a link block to each column and set the link block to 100% width. But I never get a proper height for the image – it won't "expand". I guess setting a pixel height to the column will fill the page to 100%, but it won't scale properly when resizing the browser window.
I've literally struggled with this for a long, long time now..

...help?

This is my public link: https://webflow.com/design/stevenperssonupdate?preview=0c1a0ba18c8720a537a6ef48b04dc6c2


#7

@StevenP I'm not sure I get what you want. Is this http://sab.webflow.com/image-distortion what you want, or approaching?


#8

Yes, exactly. And then on top I'm going to add a div that appears on hover.


#9

Still got this issue where the hover div don't start from the bottom of the image but from below it. How come?
I remember I stated the same issue in a previous thread, where you @vincent had it showing up correctly meanwhile it didn't show up correctly for me.
Look at the second row - first image.

https://webflow.com/design/stevenperssonupdate?preview=0c1a0ba18c8720a537a6ef48b04dc6c2


#10