I have the following code that on mouseover opens/closes a div above an image. Is there a way to give it an effect? if so are there examples? I have searched for them but I am no js hero.

HTML:

<div>
<div class="under"><img src=".jpg" alt="test"></div>
<div class="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>

CSS:

div {
    height: 400px;
    width: 600px;
}

div > div {
    height: 70px;
    position: absolute;
}

.under {
    background: yellow;
    top: 0px;
}

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
}

.top:hover {
    background: #008285;
    bottom: 100px;
    height: 300px;
    top: 100px;
}

JSFiddle: /

I have the following code that on mouseover opens/closes a div above an image. Is there a way to give it an effect? if so are there examples? I have searched for them but I am no js hero.

HTML:

<div>
<div class="under"><img src="http://oi60.tinypic./244xp91.jpg" alt="test"></div>
<div class="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>

CSS:

div {
    height: 400px;
    width: 600px;
}

div > div {
    height: 70px;
    position: absolute;
}

.under {
    background: yellow;
    top: 0px;
}

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
}

.top:hover {
    background: #008285;
    bottom: 100px;
    height: 300px;
    top: 100px;
}

JSFiddle: http://jsfiddle/2obp1hgL/

• javascript
• jquery
• html
• css

4 Answers 4

you can use the

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
 transition: all 0.5s ease;

css property: http://jsfiddle/2obp1hgL/3/

Simply put this in top css (3s is time in seconds, change it as you want) :

-webkit-transition: all 3s;
-moz-transition: all 3s;
-ms-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;

Updated fiddle : Transition

BTW, all will make all modification looking slow, if you want to affect only some properties, you'll have to replace all by the property name :

all 3s ---> width 1s, bottom 2s, height 0.2s

You can use css property transition, here's jsfiddle

.top {
    background: #008285;
    bottom: -50px;
    top: 330px;
    -webkit-transition: top .5s, bottom .5s, background, .5s; 
    transition: top .5s, bottom .5s, background, .5s;
}

update your css of .top like this

Your updated JSFiddle

you can read more about transition here

.top {
        background: #008285;
        bottom: -50px;
        top: 330px;
            /* For Safari 3.1 to 6.0 */
        -webkit-transition-property: all;
        -webkit-transition-duration: 1s;
        /* Standard syntax */
        transition-property: all;
        transition-duration: 1s;
    }

It is better if you can do this using JavaScript because transition is supported by