Streaming live at 10am (PST)

How to move something when hovering over a button?


#1

Hello, Firstly I want to say webflow is great I was playing with it whole day and its really fun to build site with it!

My question is: I was looking at webflow-playground and found something interesting (atleast for me) and was trying to achieve similar effect but I was not able to do that. Maybe I'm missing something or thats not abailable yet like Listings "ul / li" and some other stuff.

It is in the "Products Grid" section of webflow-playground.

When a user hover the "Skateboard" class (the white box) the "Photo" class (which is a photo of skateboard moves up. In simple words when a user hove a specific class (Skateboard) another class (Photo) moves. How can I achieve similar effect. I have also noticed in playground there is something like

"When inside of: Skateboard" thing which is responsible for this to achieve.

I hope I have explained it well. Thanks for any help.


How do I create a hover effect on multiple objects?
#2

Yes @danjimaon, this is something we will be implementing in the future. What "When inside of" feature allows for is allowing for targeting specific elements inside of classes to behave a certain way when interacting with that class.

.CLASS-A:hover .CLASS-B {
Translate up...
}

This translates to: Class-B, if it's inside of Class-A, will move up when Class-A is hovered.


#3

Ok great! Thanks @thesergie

I was just wanted to make sure I do not miss something...


#4

Any updates on this? smile


#5

@danjimaon Hi again! All of us want to build this feature (especially me!) but we're knocking out some more important features before implementing this one. Thank you for your patience!

As far as being able to move another element when you hover a button (for example) you can achieve this with some custom javascript code. @bartekkustra can you show us how to do something like?


#6

Hey! Yup there is a way to do that. Guess where? jQuery smiley God, I love this language ^^ Let me explain at first what's what.

You can use jQuery hover function. It is a very simple function that does 2 things. It triggers a function when you hover over the thing and hover out of that thing. The structure is goddamn simple wink

.hover( handlerIn(eventObject), handlerOut(eventObject) )

I know it looks terrible, but it is actually pretty easy smile .hover() function must contain of two functions separated with , to do something when hover is over and out. I'll show an example here.


html

<p>Awesome text is awesome.</p>

css

p {  color: blue;  }
newclass {  color: red  }

jQuery

$(document).ready(function() {
  $("p").hover(
    function() {
      $(this).addClass("newclass");
    },
    function() {
      $(this).removeClass("newclass");
    }
  );
});

The code above goes like this. When you hover over the paragraph block <p></p> which by default is in color blue, it adds a class newclass to the object you hover over. When you take the mouse pointer off of the it removes the class.


But let's make it somehow useful for you. You can create a block that contains two other blocks like this:

<div class="item-container">
  <div class="item-image"></div>
  <div class="item-text"></div>
</div>

and make some jQuery to trigger when you hover over the item-container.

$(document).ready(function() {
  $('.item-container').hover(
    function() {
      $(this).children('item-image').animate( {  top: '+=50'  } );
    },
    function() {
      $(this).children('item-image').animate( {  top: '-=50'  } );
    }
  );
});

I've used .children() function here. There is also a .find() function which works very similar. The difference is that .children() looks for stuff that is directly under the parent item. .find() search for them. hookedonwinter from stackoverflow said it quite well in this topic:

Use children for immediate descendants, or find for deeper elements.

I hope my little tutorial will help you with your issues. Thanks @thesergie for pointing to this topic smile I've started to be recognized as a jQuery guy ^^ Btw, have you seen what we did with @Zacchino? Full viewport image slider with quotes inside Webflow smile


#7

This is a great, detailed tutorial @bartekkustra! This is really helpful. thumbsup


#8

You're welcome wink I hope our users will find it useful wink I mean your users stuck_out_tongue_winking_eye


#9

Has this been implemented yet? And if so, is there any example of how it works? Would love to be able to use the transform when a user scrolls to a section. thanks.


#10

Hey @msmillie great question. I'm actually working on this right now! I can't give you an ETA but the functionality is coming soon.


#11

Thanks for the reply. Right now, I'm getting this ability using WOW.js.

Is there any way to add something like this (bold text) to the webflow class (bottomhero) This works to fade in the element however, I have to add the bold text to the class it after I export the site. Thanks.

class= "bottomhero wow fadeIn data-wow-duration="2.2s" data-wow-delay="0.6s" style="visibility: visible;-webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s;"


#12

Hey @msmillie you can add these data-wow-duration="2.2s" in the data attributes panel under the element's section.


#13

Pretty close, but I need to have additional classes defined like this:

<img class="componentimage wow animated fadeinleft animated" src="images/mini.jpg" width="75%" alt="532748671f306e86130002c3_mini.jpg" data-wow-delay="0.4s" style="visibility: visible;-webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s;">

Which is fine, I can put "wow animated fadeinleft animated" into webflow when I am defining the classes but then when it exports all the class names are lower case and the script will not run...the class fadeInLeft needs to have "In" and "Left" capitalized. I can go in after and edit the code, but it's kind of a pain and defeats the purpose of adding it into the custom attributes dialog.

ideas? Thanks.

MFS


#15

You can use our new beta Interactions feature to move anything while hovering over anything. Press Ctrl+i+i in the designer to activate Interactions beta.

Steps:

  • Select your button.
  • Go to settings > interactions.
  • Create new interaction.
  • Choose Hover trigger.
  • Choose "Affect different element(s)"
  • Add the class you want to move.
  • Add effect steps that will animate that element when you hover over the button.

(Note: Hover isn't supported in touch devices so be aware of that).


#16

@thesergie PERFECT! I just did a try and it worked very well.

thanks very much smile


#17