Streaming live at 10am (PST)

How to hover an image?


#1

Goodness, I cannot for the love of god figure this out.

It's simple, I have two images.

When I have my mouse hover an image, I want the other image to appear.

Not a button, just a plain image with a hovering effect.

How the hell do I do this with webflow? lol


#2

Hi @liberrtines-

Let me help you out with that! It can be a little bit tricky since HTML/CSS don't have an easy way of creating hover effects for images, themselves.

What you will want to do is instead of adding an "Image," add a "Block" where you would like the image to be.

Make the block the size you would like your image to be, and then add the normal version of the image as a "Background"

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

Now just change the "Background" image for this "Hover" state to be the one you would like displayed when the user hovers over this block.

Like I said, it's a little complicated, but basically should be done with "Blocks" and "Background" images. Hope that helps!


#3

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 smile


#4

@bartekkustra I like that wink


#5

You can take a look at it at www.kreacjo.pl (Realizacje, Metamorfozy, Referencje) smile



www.kreacjo.pl/realizacje

www.kreacjo.pl/metamorfozy

www.kreacjo.pl/referencje


This site was designed in Webflow.

#6

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


#7

Thank you so much! This really helped me out smile


#8

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?

Thanks A LOT!


#9
<script>
 $('.pressed-image').click(function() {
  $(this).toggleClass('active');
 });
</script>

And add some awesome CSS to the active class wink That jQuery script will create/delete class active from clicked image with pressed-image class. Hope that helps wink


#10

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


#11

Go to Dashboard of your site and go to Custom Code on the left panel. In the window that will show write:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
 $('.pressed-image').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
 });
</script>

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 smile


#12

The background image trick works, but how would I add a link to this div block now?

For example - the investors part of this layout - http://pleoco.webflow.com/


#13

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


#14

Perfect, thanks alot Sergie!


#15

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

Your site looks great by the way.

Thanks!


#16
$(document).ready(function() {
  $('first-section-class').css('height', $(window).height());
});

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.


#17

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