I found a couple of topics that asked a similar question but not for my uses. I wan’t to create a simple image swap on mouseover element for an image link. From what I can tell this isn’t possible in webflow even though it is a pretty basic html feature since I first learned dreamweaver over 8 years ago. I want the option to create an image link where it is only text with full transparency and have parts of it appear and disappear with hover. I want to be able to add a colored drop shadow to the image. This would be very easy with an image swap, have the first image with no shadow and the second image with the colored shadow as well. I tried doing the background image trick and having the link image fade in from 100% transparency but because it is fully transparent, they didn’t line up and remain that way on all devices.
A good example of this is the HI text on my site http://dfinkdesign.webflow.com Imagine the first image being just HI in gray, and the rollover to add the red drop shadow. Obviously the image wouldn’t just be adding the drop shadow but an entire swap including the HI text element as well.
Create a Div Block, change it to the width/height of your “HI” image, and give it a background image (e.g. without the shadow). This is your pre-hover state.
Drag in an Image inside the Div Block, and upload your hover state image. It should be the exact same width/height as your background image.
Click the image, and give it a class. Then give it an opacity of 0% to make it invisible. Also, you can add a transition on the Opacity property in this class.
With that same class selected, add a Hover state, and set the opacity back to 100%.
Now, when you preview your site, your non-hover state should be visible (from the bg image), and your inline image should fade in when you hover over it.
Let me know if that makes any sense. It works in my head
So I found a problem with this way of doing things. If I decide that I want an image link set up this way to be a bit smaller on other devices and I scale the image down, the background image and the image link don’t line up anymore. So it ruins the effect.
Are there any plans to include a way to change the image in the hover style of an image? Or even just have a section that says hover state - upload image. This would be an amazing feature. Its a very simple html code that I’ve been using for the better part of a decade but it is missing from Webflow
I just put a div block, made the background image one version of my image, and then made a hover state and changed the background to the other version of my image (both images are exactly the same size of course). Then, re-sizing my div block also re-sizes both images together…http://rentberry-remake.webflow.io/ (look at the press logos just below “apply for property” button)…hovering over the logos changes them from a gray version to the colored version. This works with link blocks too…
You can achieve this effect with one image. Create an image with your hover state lined up right next to your normal state. Let’s say for instance that your image is 500 x 500 px:
Make an image that is 1000 x 500 px, with your hover image to the left of your normal image.
Place your image inside a div that is 500 x 500 px with overflow hidden and position relative.
Give your image a class with a minimum width of 1000 px with position absolute.
Create a hover state for your image class with a left position of -500px.
Hey Dave
I know this is an old post, but would you be able to help me achieve and a hover effect similar to what you use in the “My Work” section? I can’t seem to find a way to do this while still having the image be an active link. Any insight is greatly appreciated.
