CODEWITHSUNDEEP
jqueryhtmlcsspositioning
user1544337
user1544337

Reputation:

Positioning & sliding of HTML elements

I have a div which contains a div which contains two other divs:

<div class="container">
    <div class="overlay">
        <div class="title">Some title</div>
        <div class="description">Some description</div>
    </div>
</div>

My CSS:

div.container {
    width: 220px;
    height: 160px;
    display: inline-block;
    position: relative;
}

div.container div.overlay {
    margin: 0;
    position: absolute;
    bottom: 0px;
    width: 220px;
    padding: 0;
}

This, with some other, irrelevant, CSS, makes what's shown in the second picture. Now I need to make some other CSS to make it like the first picture by default. When you go with your mouse over .container, the .description should slide in, making it like the second picture:

enter image description here enter image description here

I can't figure out how to position everything and let the description slide in. Can you?

This question is only about positioning and the jQuery needed to slide the description in - colors and other layout isn't the problem. I'm looking for a solution compatible in all major browsers.

EDIT:

Forgot to mention that I do not know the height of .title or .description - the heights are set to auto because the depend on the text in there.

Upvotes: 0

Views: 189

Answers (4)

jantimon
jantimon

Reputation: 38142

This can be done with pure css 3.

As it is not possible to have a height transition from 0 to auto it uses max-height instead:

.description  {
    max-height: 0;
    transition: 2s;
    overflow:hidden;
}

div.container div.overlay:hover .description {
  max-height: 160px;
}

pure css solution: http://jsfiddle.net/DkAKt/1/

This solution works even if you don't know the height of your description.

CSS 3 transitions require Internet Explorer 10+ : http://caniuse.com/#search=transitions . Older versions will still work however without the animation.

If you can't live without an animation in IE 8-9 you have to use javascript:

jQuery(function($){
  $(".container").on('mouseenter', function(){
    $(".description", this).stop(1,1).slideDown();  
  }).on('mouseleave', function(){
    $(".description", this).stop(1,1).slideUp();  
  })
  .find('.description').slideUp(0);
});

pure jQuery solution: http://jsfiddle.net/DkAKt/2/

Upvotes: 1

Barney
Barney

Reputation: 16456

You'll need Javascript to do this because the solution depends upon knowing the height of the description. You mentioned jQuery — here's the code for that:

$(function slideDescriptionOnHover(){
    $('.container').each(function adjustOverlayPosition(){
        var $overlay     = $(this).find('.overlay');
        var $description = $(this).find('.description');

        function slideUp(){
            $overlay.animate('bottom', 0);
        };

        function slideDown(){
            $overlay.animate('bottom', -$description.height());
        };

        $(this).hover(slideUp,slideDown);

        $overlay.css('margin-bottom', -$description.height());
    });
});

I assumed you'd want to animate the effect: if not, replace the animate method with css.

A brief guide as to what's going on:

  1. For each .container (they may have different height descriptions, depending on how much text each contains)…
  2. Bind variables for the .overlay, which we'll want to animate, and the .description, whose height dictates how we want to animate.
  3. Define 2 functions: one that sets bottom to 0, ensuring the very bottom of the .overlay lines up with the .container's bottom; and another which pulls the bottom of the .overlay down by the height of the .description.
  4. Bind those two functions to the jQuery hover method (an alias for mouseover and mouseout)
  5. …and finally, make sure the description is hidden to start with.

You'll also need to adjust the rule for div.container, such that it contains the property:

overflow: hidden

Upvotes: 1

Ali Bassam
Ali Bassam

Reputation: 9959

For a Pure CSS Solution, you need to move the .overlay div a little bit down.

bottom:-30px;.

Then you don't wanna show that part, so add overflow:hidden; to .container.

Now, when you hover over it, you need to raise it up.

.overlay:hover
{
    bottom:0;
}

Now make it more beautiful, use transition.

.overlay
{
     bottom:-30px;
     -webkit-transition:bottom 2s;
        -moz-transition:bottom 2s;
          -o-transition:bottom 2s;
             transition:bottom 2s;
}
.overlay:hover
{
    bottom:0;
}

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

This should be pretty straightforward, add the following CSS:

div.container {
    overflow:hidden;
}

div.overlay {
    bottom:-30px;
    -webkit-transition:bottom 500ms;
    -moz-transition:bottom 500ms;
    -o-transition:bottom 500ms;
    transition:bottom 500ms;
}

div.description {
    height:30px;
}

div.container:hover > div.overlay {
    bottom:0;
}

That should do it. If not, remove the > selectors, they might be too specific.

Upvotes: 0

Related Questions