▼
Streaming live at 10am (PST)

How to recreate picture zoom+add black opacity+button appear?

Design help General
#1

Hi everyone,

I am pretty new to webflow and spending almost all day every day to try and learn it. As an exercise I try to recreate websites in webflow to learn how to build them. Friends of mine own a high end European kitchen import business and I am trying to recreate their website. They are using a special effect when hovering over menu images that causes the picture to zoom, but not get bigger than it’s original frame, so basically zooming within it’s border. In addition to that, the picture gets darker to contrast a white button also that shows up-kinda like adding black opacity, all at the same time. How can I recreate that most easily and effectively?

Check it out here:
https://harmskitchen.ca/collection/interior-fitments/

I tried stacking a few elements-like this. First a div block, put a picture in it - position relative and Z - 1. Another div block with a black background over top of the image with absolute positioning and Z - 2. I can get the opacity to work with hover animations, but when working in the designer, I cannot see the picture the way it would appear on the website, I just see the black div block which is positioned over top of the image and it’s driving me nuts. I want to be able to see the content in the designer without having to use the preview function to see how things look. Is there an easier way to achieve that? Perhaps I am missing something simple.

Would really appreciate help with that.

Thanks in advance

Vlady

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Using this method you’ll only need three elements: (NO interactions required)

https://sandbox-903b9c.webflow.io/picture-zoom-add-black-opacity-button-appear

Screenshot_2018-10-05_151032

Share link: https://preview.webflow.com/preview/sandbox-903b9c?utm_source=sandbox-903b9c&preview=2a77d4d5446ddad097abb9bf8603288b

#3

Thanks so much for your reply samliew,

I should have been a little more accurate when describing my level of expertise in web design. I am not just new to webflow, I am new to web design in general. I have done a couple shopify stores, etc. But I have no coding skills what so ever. Since a basic knowledge of coding helps understand how webflow works, and I do not have that yet, I don’t quite understand what you did there, samliew.

I assume you are using the collections and collection lists to make things quicker for you to show me an example? Or should I use them as well when recreating my friends website?

The red square which has three elements in it includes 2 div blocks and one link, correct. Is that link a button or link text with a border around it?

Also, where did you put the pictures? Did you put them as the background image in one of the div blocks since I do not see a picture element?

How did you get the opacity/shade effect to work like that?

Sorry that I have so many questions, but I do not want to miss anything.

By the way, the second link shows an error, it says that this is not the page I wanted or something like that. The tab shows error 404. Can you please resend it?

Thanks so much for your help, really appreciate it.

#4

Sorry, I thought the share link was active. Switch to the last page and click on the elements to see how each was done