Change image on hover

Design help Animations & Interactions
1

Hello,

I’m wondering if someone can point me in the right direction to achieve the following;

I want an image in a link block to be black, then when you hover over the linkblock/image the background will change to e.g Orange then the image will change to white.

I know how to change the background colour but not sure how to change the image?

Best regards,
Matt

2

Is this what you’re looking for?

div {
height: 500px;
width: 50%;
background-size: cover;
background-position: center;
background-image: url(“https://www.prysm.com/hubfs/Prysm_Jul2016/Images/prysm-for-the-digital-workplace.jpg?t=1487784187333”);
}

div:hover {
background-image: url(“https://www.prysm.com/hubfs/Prysm_Jul2016/Images/prysm-digital-workplace.jpg?t=1487784187333”);
}

3

Hello,

Thanks for the reply, let me know you what I’m looking for.

https://preview.webflow.com/preview/showw?preview=48d14b42ae9da2633df7621978498244

When you hover over each aboutblock/div I want “iconbox” background to change to purple then for the image to change to a white image.

Best regards,
Matt

4

Hi @Matty yes that’s definitely possible to do in Webflow, I usually recommend creating a sprite for that kind of background image change as you’ll essentially change the background image position on hover to show the other image variant (white variant, vs dark variant).

Adding a background color change is quick and easy to do as well.

1568×956 138 KB

Please let me know if you have any questions :smiley:

5

@Waldo

Thanks for the reply, with regards to the colour background is it possible to have it so when you hover over the “aboutbox” div it changes rather then hovering over the circle its self?

Sorry you completely lost me with sprite, is it not possible to do this in webflow itself? sorry to be a noob

Matt

6

Anyone know? :slight_smile:

7

@Matty - Hi there! Webflow can’t change the colours of pngs or jpegs - if you want the png icon to turn white when you over over it you will need a white version of the png. i.e. When you hover over the element, the black png would disappear and the white png would appear. I would set this up with Interactions on ‘iconbox’ using ‘Affect different element’

  1. Create a white version of the icon in Photoshop and load as Image widget - give it a class name. This will sit on top of the black png.
  2. (You will need to give the black and white pngs a class name each and set their Positions to ‘Absolute’ - this is so they sit on top of each other in ‘iconbox’)
  3. Add an Interaction to the white png and set the Initial Appearance to 0% opacity.
  4. Add an Interaction to ‘iconbox’ and use ‘Affect different element’ (select the white png class name) to then set the white png to 100% opacity
  5. And in the same interaction, use ‘Affect different element’ (select the bacl png class name) and hide the black png (set to 0% opacity) - You can adjust the speed of these transitions to your liking (i.e. to match the transition speed of the background colour change)

You should also set the transition speed of ‘iconbox’ background colour change to something like 500ms so its a smoother transition from white to red. This may not be the best or only way but it’s how I’d do it! Hope you understand this and it helps! The main point is, you can’t change colours of pngs - you have to use two different pngs and transition between them using an interaction. Regards - Kai

1 Like
8

@Keejo

Thanks for the detailed reply Kai, I will give this a go in the morning.

When you say give each icon a class, do you simply mean create a class for the image? not create a new div?

Also, is it possible to add more elements? as when the white image shows I want the “iconbox” background colour to change when you hover over main box div so the white image is visible.

When I thought about this idea it sounded much easier to do :stuck_out_tongue:

9

Hi Matty, my pleasure! Good luck! :slight_smile:

Sorry…! As you know, when you add elements to Webflow you need to give them a class name so you can edit the settings - that’s all I mean by ‘give each image element a class’.

Both pngs will need Position set to Absolute:

You have already set the background to change to red - so this is ok - but I would slow this down by adding a 500ms transition to ‘Background Color’ under Transitions & Transforms.

These things get easier with practice! Regards - Kai

10

Here’s an example solution … you can mess with interactions to get just the effect you are looking for … hope it helps

link removed

11

Hey! I just set this up too! @rayjnorris, you beat me to it! :slight_smile:

https://preview.webflow.com/preview/kais-dandy-project?preview=b2dea0d163a5e62be10fb064b23ef9c7

Just check out the structure and interaction settings! Regards - Kai

12

cool … love looking at other’s solutions … also, dig’n all the support flying around …

13

@rayjnorris - Well, it’s 00:25 on a Saturday night and I’m playing around with Webflow - so pretty sad really! :slight_smile:

1 Like
14

@rayjnorris @Keejo

Thanks both for your help, I got it working!

Is it possible to change it so when you hover over the “aboutbox” div the iconbox colour changes?

15

YES. I believe you will need to duplicate your iconbox(s) (iconbox_color1, iconbox_color2) and fade them in and out using the hover interaction transition tied to aboutbox, similar to what you did with imageWhite and imageGrey.

[EXAMPLE]removed
Hover over the box, changes the background of circle - hover the circle, changes the color of the star. I hope this helps …

16

@rayjnorris

Thanks for the response, the issue I seem to be facing is I cant have 2 interactions on 1 div.

As I want the background colour and the image colour to change.

Best regards,
Matt

17

@Matty - Hi there, you can’t change the background colour of a div with an interaction (unfortunately). If you want the background colour of ‘iconbox’ to change when you hover over ‘aboutbox’, you will have to add the red background colour (#d2036e) to the white png in Photoshop.

Then remove the red background hover state on ‘iconbox’ as this will now be redundant. Regards - Kai

18

@Keejo

Ahh why didn’t I think of that, thanks guys will sit down and try and go through this after I’ve put up all our flat pack furniture lol :hammer:

19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

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