Place a div above another div

Question

I have two divs inside another div (#video-wrapper).

html:

<div class="row">
    <div class="video-wrapper col-lg-2">
        <div class="video-thumbnail">
            <img src="img/img.jpg">
            <span class="glyphicon glyphicon-play video-play"></span>
            <span class="glyphicon glyphicon-info-sign video-info"></span>
        </div>
        <div class="video-description">
            <p class="title">See and Sea...</p>
            <div class="video-upload-info">
                <p class="by">Franschisil</p>
                <p class="pubdate">4 days ago</p>
            </div>
        </div>
    </div>
</div>

css:

.video-wrapper {
}

.video-thumbnail {
    position: relative;
    height: 110px;
    box-shadow: 0px 0px 10px 0px;
}

.video-description {
    height: 100px;
    background-color: white;
    padding: 5px;
    word-wrap: break-word;
    opacity: 0.9;
}

Now it looks like this:

What I want to achieve is to hide the #video-description, and diplay it above the #video-thumbnail when the .video-info is clicked. How do I achieve this? Your help and guidance will be very much appreciated. Thank you.

update

This is how I want it to look like before I click the info:

And when its clicked to be like this:

** update ** When applied position:absolute the .video-description width shrinks in size if there are less alphabets :

Answer 1

You can achieve this with some simple jQuery.

I've created two examples for you:

DEMO 1

DEMO 2

Where I use the following jQuery:

// DEMO 1
$(document).ready(function() {
    $('.info').click(function() {
        $('.video-description').slideToggle();        
    });
});

// DEMO 2
$(document).ready(function() {
    var clicked = false;
    $('.info').click(function() {
        $('.overlay').slideToggle();  
        if (!clicked) {
            $('.info').animate({top: "115px"}, 500);
            clicked = true;
        } else {
            $('.info').animate({top: "0px"}, 500);
            clicked = false;
        }
    });
});

In both demos, you will find all the necessary HTML, CSS and jQuery. If you study the code carefully, you should be able to replicate the effects yourself. Don't forget to include jQuery in your document.

Answer 2

You need something like this in CSS:

.video-wrapper{
    position: relative;
    box-shadow: 0px 0px 10px 0px;
    overflow: hidden;
}

.video-description {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
}

.video-info{
    position: relative;
    z-index: 1;
}

jQuery:

$('.video-info').click(function(){
    $('.video-description').fadeToggle();
});

DEMO