Now you should see your image in the website design. To add the hover effect, with the “Block” selected, click on the pointer icon in the “Current Selector” field, and select “Hover.”
It’s best if you simply put a background as an image you want to be shown when hover and put an another image on it. Than on hover of this image you can set the transparency to 0 with nice ease-in-ease-out effect
I followed Kkillat instruction which great by the way, especially for a novice such as me. I managed to create the effect of changing images when hovering over main image. However bartekkustra I can’t quite follow your method. I am also very impressed with your link which I believe you created, is it possible you could give me a quick guide step by step how you created this. Can this also be achieved using text as I am creating a DVD website and would wish only to display the image and then see the text when hovering over the image. Thanks David
Thanks all! I made some cool stuff with this!!!
I was wondering if i use press to do the responsive version, what do you think? But, have a way to let the image “pressed” until i click again? Like the three examples that @bartekkustra gave?
And add some awesome CSS to the active class That jQuery script will create/delete class active from clicked image with pressed-image class. Hope that helps
Thank you for taking time to reply bartekkustra. I have to apologise but I haven’t learnt coding. I am using web design for the first time as I am a small business setting up a website for the first time. This is what I have created so far. http://moviexpress.webflow.com/ You included your links which showed me how awesome your effects could be and what a difference this makes. Is there any way you can give me a guide through how to achieve this as kkilat demonstrated above. If not don’t worry. David
Create an image on your site and add a class pressed-image to it (just like that $('.pressed-image') code above). After you style it however you want, add another class to it: active, give it a style as you want to, and after that, remove active class from your image. Export your site and check if a click on it works
@Daniel_Vernon instead of using a Div Block, use a Link Block. The process is the same. Then go to the link block’s settings and there you can add a link.
Off topic, but how did you get it so your header is fixed to the height of the browser and the arrow links to the next section? Trying to achieve the same effect on mine – https://webflow.com/design/warbo?preview=d5b626084b6ea133f4ea610c5321ee7d (where the grey section is fixed to the height of the browser).
Select your second section, go to setting panel, add unique id to it. Now go back to the first section, select the section, make it position: relative, add a link block to it, make it position: absolute with bottom: 25px, add an image of an arrow inside of it, select that link block again, go to settings panel, link it the same way you link menu items to the second section.