CODEWITHSUNDEEP
javascriptcsshoverslidermouseover
user3290597
user3290597

Reputation: 31

How to slide up and down on mouseover using CSS and Javascript?

http://www.sherpany.com/

Here is a site that I found. I was wondering how to make the "Investors, Board of Directors, Companies" section.

I want to know how to do it in pure css only, and another way using javascript? How can I make this happen, and also add the button, and make it disappear as it slides back down.

Thank you.

Upvotes: 2

Views: 6503

Answers (3)

etangins
etangins

Reputation: 624

I would use the GSAP Animation platform. You simply need to link to it in the head section.

You would want to use a tween like so where #menu is a tab that you want to pop up. 

TweenMax.to("#menu", .5, {height:____})

____ is whatever the new height should be.

You would also want

#menu {
    position:absolute;
    bottom:0
}

inside of a relatively positioned div.

Upvotes: 1

jkrehm
jkrehm

Reputation: 179

For a pure CSS way of doing it, I'd look into the following:

Then make a few div's (or other block elements) and when the user hovers over element, change its height and opacity. If you set a transition on those styles then modern browsers will show a nice little effect.

For example:

.move {
    background-color: #000;
    color: #fff;
    height: 100px;
    opacity: 0.3;
    position: absolute;
    top: 50px;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    width: 100px;
}
.move:hover {
    opacity: 0.7;
    top: 10px;;
}

Fiddle: http://jsfiddle.net/jkrehm/mn55L/

Keep in mind rendering optimization (especially on mobile devices) and fallback for older browsers. My example likely won't work on older versions of IE.

As for how to do it in JavaScript, I'd look into the .animate() function. http://api.jquery.com/animate/

Upvotes: 0

benoitz
benoitz

Reputation: 51

You need to set two different classes and add some css transition:

let's say each 'block' has the block class and each button has the button class, then do something like :

 .block {
  height:40px;
  opacity:0.4;
  transition: height 1s;
}

.block:hover {
  height:100px;
}

.block > .button {
  opacity:0;
  transition: opacity 1s;
}

.block:hover > .button {
  opacity:1;
}

Each transition is target at a css property.

Here's a little playground/example for you: http://codepen.io/anon/pen/FLHmy

Upvotes: 1

Related Questions