How to do a hover-invert effect such as this?

Design help Animations & Interactions
1

I want to make the effect shown on Wave Sports + Entertainment (scroll below to OUR MEDIA BRANDS). When you hover over the logo, it shows an inverted, black & white effect. I thought about proceeding to do this by fading to another inverted image (created on Photoshop). But, I’m not sure how to fade to another image in the same position on hover.

Is there another easier way to do this? Thanks in advance

Here is my public share link (scroll to OUR MEDIA BRANDS; that’s the logo grid i want to replicate the effect in) : Webflow - ZLR Media

2

hi @global there are a several options how to . Here is a short overview.

1 . use an image as a background and change the background image url on hover

    .card {
/* set your css */
        background: url("images/card-back.jpg") no-repeat;
    }

    .card:hover {
        background: url("images/card-front.jpg") no-repeat;
    }

2. use CSS last-child (they use similar method)

<a>
   <img src="http://path/to/my/image-1" /> 
   <img src="http://path/to/my/image-2" />
</a>

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

3. use javascript to change img src.

<img id="my-img" src="'http://path/to/my/image-1" onmouseover="in(this);" onmouseout="out(this);" />

function In(element) {
  element.setAttribute('src', 'http://path/to/my/image-2');
}

function out(element) {
  element.setAttribute('src', 'http://path/to/my/image-1');
}

As you see there are many ways how to. Choose one that will suit your architecture best.

Good luck

3

The sample website you’ve provided is using a tab element and displays content below the logo after click/tap. Will you be doing the same thing or are you simply looking for a hover effect? The process is similar but different for each.

Using a simple hover as an example, you can go to the class style selector, click the little arrow and choose “hover”. Then go down to the effects tab and assign two filters: invert and grayscale

You can then go back to the style selector, click the little arrow and go back to the “none” state. Go down to “Effects > Transitions” and assign some easing to make the hover transition smooth.

IMG_0430
IMG_04302732×1751 356 KB

4

hi @Port_of_Folio this method is of course also possible if you would like invert graphics into grayscale but if you pay attention to inverted images on example page these logos are just black and white. This mean you can’t convert any other color than black into white with grayscale.

I hope it make sense why I didn’t mentioned it.

5

Of course. Many ways to achieve. I like to suggest a simple no-code alternative since Webflow is a no-code platform. I assume people are using Webflow for this purpose. You list a code method but do not include information regarding how to implement it, in terms of where to position the code and/or how to use the designer interface to implement what the code suggests.

In the designer, you can also use the hover state to change out a background image.

And, the true image swap method (using the designer interface) will best be implemented using a hover interaction.

• Add a Div to wrap images
• Add 2 image blocks
• Give them different class names and make the one “on top” positioned as absolute, covering the “below” image
• Add a hover animation to the parent Div that makes the “top” image’s opacity go to 0 once you hover in and back to 100 on hover out.

6

I agree with this statement for very simple applications but WF is in fact low-code for developers despite what WF adds saying to get a new clients.

I have provided several solutions to choose from and WF has great set of tutorials about how to work with custom code plus forum has many requests to read if any doubts.

I presume when someone decided to be a web developer using this platform will invest some time to get familiar how this platform work and how use it. If any doubts about implementing custom code as you can find I’m always open to help or more likely post links to solved requests about topic that can be found here. :person_shrugging: