CODEWITHSUNDEEP
htmljquerycss
user2120881
user2120881

Reputation: 73

Div push other 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.

Demo

#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;}

<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: 1150

Answers (1)

Slytherin
Slytherin

Reputation: 474

I believe what you need is to change order of those elements, in following fashion.

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

You are loosing the mosaic efect because of relative positioning and floating. When :hoveryour element is increased in proportions. You can try playing with positions. Adding position:absolute to title and details might be what you are looking for.

Upvotes: 1

Related Questions