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:

enter image description here

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:

enter image description here

And when its clicked to be like this:

enter image description here

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

enter image description here

to show info, you can achive this with jQuery and to display info above thumbnail you can achive this with position: absolute in your css — Shehary, Jul 12 '15 at 15:23

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You can achieve this with some simple jQuery.

I've created two examples for you:

enter image description here

DEMO 1

enter image description here

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 12 '15 at 15:53

Jean-Paul

19,910
9
62
88

Its really interesting. But I am using bootstrap to use its `col` classes to get a responsive page. – Kakar Jul 12 '15 at 16:14
1

Maybe this is not what you are looking for, but I loved the way the answer is shown. – Alvaro Flaño Larrondo Jul 12 '15 at 16:58
@Kakar This code should also work with bootstrap if you make some minor adjustments. – Jean-Paul Jul 12 '15 at 17:49
@AlvaroFlañoLarrondo Thank you sir :) – Jean-Paul Jul 12 '15 at 17:49

lmgonzalves · Accepted Answer · 2015-07-12T15:45:59.700

1

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

edited Jul 12 '15 at 15:45

answered Jul 12 '15 at 15:27

lmgonzalves

6,518
3
22
41

I did tried using `position:absolute`, but the width of `.video-description` shrinks if the there are less words. I have updated with the image. – Kakar Jul 12 '15 at 15:38
Because of that I set `width: 100%;` also. – lmgonzalves Jul 12 '15 at 15:40
If I set the width to 100%, the width exceeds the parent div. – Kakar Jul 12 '15 at 15:42
I update my answer, try [this new demo](https://jsfiddle.net/lmgonzalves/arr6LLdc/3/) :) – lmgonzalves Jul 12 '15 at 15:46
Yes it seems fine. But I am trying to achieve the same width of `.video-thumbnail` for `.video-description`. How would I do that? Lastly in your code, it would be better to use `$(this)`, since it will have other videos too. – Kakar Jul 12 '15 at 16:08
You only need to remove `padding: 5px;`, and in jQuery code use `$(this).closest('.video-wrapper').find('.video-description').fadeToggle();` [DEMO](https://jsfiddle.net/lmgonzalves/arr6LLdc/4/). – lmgonzalves Jul 12 '15 at 16:54

score 0 · Answer 3 · answered Jul 12 '15 at 15:29

0

You can use jQuery to achieve this

Try the below code:

jQuery(".video-description").on('click',function(){
  jQuery(".video-description").insertBefore(jQuery(".video-thumbnail"));

});

Hope it helps....!

answered Jul 12 '15 at 15:29

Domain

11,562
3
23
44

Place a div above another div

3 Answers3

DEMO 1

DEMO 2