HTML/CSS - Using "dynamic margins" (variables(?) - How do I? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 11 years ago.

Improve this question

I've been looking through the code of some websites, and notice that the margin sizes change depending on certain actions (eg, mouse hover, screen width) to create a cool dynamic effect. This effect can be seen here when changing screen width: http://www.smashbros.com/us/

And here on mouse hover: http://www.disneyanimation.com/projects

I really have no clue how this is done! How can the code values automatically change based on certain actions.

Thanks in advance

edit:

I tried something.... but it isn't really giving me the results I want

.cats {
background-color: #eee;
height: 90px;
width: 100%;
}

.cats {
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-up;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-up;
}

.cats {
-webkit-animation: slide-up 0.5s linear;
-moz-animation: slide-up 0.5s linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}

.cats :hover {
  /* Toggle the animation play state to running when we are hovering over our sticker */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}

@-webkit-keyframes slide-up {
from {
    margin-top: 0px
}
to {
    margin-top: -15px
  }
}

You need to make a start yourself; but first try to find some tutorials on how to start with HTML and CSS. Then, once you've made a start, and have begin to understand the syntax of selectors, and pseudo-classes, it begins to make sense. And becomes understandable, and strangely compelling and addictive. — David Thomas
– David Thomas, Commented Dec 1, 2014 at 3:03
thanks! I've been coding for sometime but never really explored animation. I tried something in my edit....am I on the right track? haha — Arman Haque
– Arman Haque, Commented Dec 1, 2014 at 3:56

Community · Accepted Answer · 2017-05-23 10:33:42Z

2

You can achieve this using CSS the hover selector as per @David's answer here:

https://stackoverflow.com/a/905042/3264286

Further details here:

http://www.w3schools.com/cssref/sel_hover.asp

Alternatively, if you are happy to use JavaScript, you can have a lot more power.

http://www.w3schools.com/jsref/event_onmouseover.asp

More discussion:

css hover vs. javascript mouseover

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Dec 1, 2014 at 3:00

Delorian

3401 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arman Haque Over a year ago

Thanks that helps! however, my questions was more directed at achieving the "moving effect". For example: div:hover { margin-top: -20px; } This will move the div up by twenty px immediately what I want is for it to move gradually

Delorian Over a year ago

Have a look at the JavaScript / jQuery code in this forum, it'll work just as you want: https://forum.jquery.com/topic/jquery-animate-hover-function

arshad Over a year ago

@ArmanHaque:To move gradually, you can apply transition to your div. For example transition: 0.6s;

arshad Over a year ago

@ArmanHaque : You are welcome :) Should I post it as an answer?

Arman Haque Over a year ago

@ArshadMuhammed Please do. Jazakallah

|

arshad · Accepted Answer · 2014-12-01 10:36:33Z

1

To move gradually, you can apply transition to your div. For example transition: 0.6s;

For more info on transitions property please visit this link.

answered Dec 1, 2014 at 10:36

arshad

8937 silver badges35 bronze badges

Collectives™ on Stack Overflow

HTML/CSS - Using "dynamic margins" (variables(?) - How do I? [closed]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related