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:
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