CODEWITHSUNDEEP
csshtmljquery-masonry
user2120881
user2120881

Reputation: 73

Div push divs on hover

I am running Masonry and all my posts and I want the title and tags to appear when I hover over the post. I am trying to display the title on top of the image and the tags to appear under the image and push the other posts around it when I hover over the post.

When I hover on a post the title display properly pushing the div above it away but the bottom div does not push away instead it appears under the post below it.

Example

CSS

#content {
    width: 210px;
    margin: 0 auto;
    overflow: auto;
    font-size: 10px;
}

.post {
    width: 50px;
    padding: 2px 2px;
    float: left;
    z-index: 1;
}

.post:hover .title {
    display: block;
}

.post:hover .details {
    display: block;
}

.title {
    display: none;
    z-index: 999;
}

.image1 {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

.image2 {
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}

.details {
    display: none;
    z-index: 999;
}

HTML

<div id="content">
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image2"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image2"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image1"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image1"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image1"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image2"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image2"></div>
        <div class="details">Post Details</div>
    </div>
    <div class="post">
        <div class="title">Post Title</div>
        <div class="image1"></div>
        <div class="details">Post Details</div>
    </div>
</div>

Upvotes: 0

Views: 301

Answers (1)

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

Masonry has "reload" , you can do like this

$('.post').hover( 
    function(){
        $('#content').masonry('reload');
    },
    function(){
        $('#content').masonry('reload');
    }                     
);

Example

Upvotes: 1

Related Questions