Question

With this current set up: http://jsfiddle.net/FMqbP/2/

How can I change the effect so that when I hover over the image, the description doesn’t fade in but rather comes up from the bottom pushing everything upwards. Similar to the boxes seen here?

Code:

<article class="project ">
    <section class="thumbnail">
        <img src="https://i.stack.imgur.com/SQbn0.gif" alt="image" />
        <section class="description">
            <hgroup>
                <h2>Title</h2>
                <h3>Cat1, Cat2, Cat3</h3>
            </hgroup>
            <p>Description</p>
                <small class="screenshot"><a class="single-image" href="https://i.stack.imgur.com/BQOva.gif">View Screenshot</a></small>
            <span>Launch <a href="http://test.com" target="_blank">Website</a> | View <a href="test2">Case Study</a></span>
        </section>
    </section>
</article>

CSS:

.project { border:1px solid #efefef;color:#fff;float:left;height:292px;margin:0 20px 20px 0;overflow:hidden;padding:3px;width:292px }
article.right { margin-right:0 }
.project .thumbnail { background:#222;height:292px;position:relative;width:292px }
.project .description { display:none;left:10px;position:absolute;top:10px;width:272px }
.project .description a { color:#fff }
body.home .project .description p { border-bottom:1px solid #777;margin-bottom:10px;padding-bottom:10px }
.project .description span { border-top:1px solid #777;float:left;margin-top:5px;padding-top:5px;width:272px }
.star { line-height:10px }
.screenshot { line-height:10px }

jQuery:

$('.thumbnail').hover(function() {
    $('img', this).stop(true,true).fadeTo(200, 0.1);
    $('.description', this).stop(true,true).fadeIn(200);
}, function() {
    $('img', this).stop(true,true).fadeTo(200, 1);
    $('.description', this).stop(true,true).fadeOut(200);
});

Answer 1

you don’t need any positioning, just use a negative margin on the image and the overflow: hidden that’s on the article.project will take care of it

in this example I use the jQuery to find the height of the description element then move the image upwards by that same height on mouseover,the decription isn’t hidden it’s just clipped by the overflow, so whe you move the image upwards by the same height as it the description moves up too and becomes visible

Example fiddle: HERE

using your HTML above:

CSS:

.project {
    border:1px solid #efefef;
    color:#fff;
    float:left;
    height:292px;
    margin:0 20px 20px 0;
    overflow:hidden;
    padding:3px;
    width:292px;
}

.project .thumbnail {
    background:#222;
    width:292px;
}

.project .description {
    background: #444;
    padding: 5px 10px;
    display: block;
}

.project .description a { color:#fff }

jQuery:

$('.thumbnail').hover(function() {
    var desH = $('.description').outerHeight();
    $('img', this).css({"margin-top" : -desH});
}, function() {
    $('img', this).css({"margin-top" : 0});
});

or

Added

jQuery to animate the "slide"

$('.thumbnail').hover(function() {
    var desH = $('.description').outerHeight();
    $('img', this).stop().animate({"margin-top": "-" + desH + "px"}, 1000 );
}, function() {
    $('img', this).stop().animate({"margin-top": "0px"}, 1000 );
});