Streaming live at 10am (PST)

Image Swap on mouseover


#1

Hey everyone,

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.

Any ideas?

Dave


#2

Hey Dave, can you try something like this:

  1. 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.
  2. 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.
  3. 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.
  4. 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 smiley


#3

Thanks Vlad,

Can this be applied to a link block as well? I fell like I tried this but it didn't line up. I'm gonna try it again now.

Dave


#4

Nope doesn't work, check it out.

https://webflow.com/design/hoverswaptest?preview=27f5a72f44256ba2290f7e5de90afcaf

They don't line up even though the link container is the same size as the image background.

Any idea why?

Dave


#5

Scratch that, the link block automatically adds padding, once the padding was removed its fine.

Thanks!!


#6

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 frowning


#7

Does anyone have an update to this comment / request or a better answer?


#8

Also looking for the answer to this question.
Has there been an update to this comment yet? Has the ability to image swap been incorporated?


#9

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


#10

Hi @Chavilah & @kmcguir

I made an example of how to do this on the show hide page of this preview:
https://preview.webflow.com/preview/marbl?preview=10cd75169f3637003dbeab74df870122


#11

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:
1. Make an image that is 1000 x 500 px, with your hover image to the left of your normal image.
2. Place your image inside a div that is 500 x 500 px with overflow hidden and position relative.
3. Give your image a class with a minimum width of 1000 px with position absolute.
4. Create a hover state for your image class with a left position of -500px.

Example here has 3 different states in case you want to have a separate image for a pressed state:
https://preview.webflow.com/preview/nicks-supercool-site-ba7cc7?preview=a5b358a0a0e7327b60d1a76ffa1667a6

The one negative of this approach is that you can't add a transition effect. If you do, you will see the image sliding across the div.


#12

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.


#13

See also Change An Image's Image On Hover (without interactions)