CODEWITHSUNDEEP
htmlcsscss-transforms
MrCleanX
MrCleanX

Reputation: 416

CSS - transform divs pushing other divs around

I'm trying to do a thumbnail page with a hover transition that zooms and displays a description. EDIT: I do not want to use jquery.

Problem 1. The hovered div pushes the neighbor div out of alignment. All the thumbs should stay in nice neat rows.

Problem 2. The hovered div pushes the bottom of the container down.

.container {
  margin-top: 75px;
  text-align: center;
  border: 2px solid black;
  padding: 5px;
}

.tn-wrapper {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 5px;
  height: 150px;
  overflow: hidden;
  transition: all 200ms ease-in;
  transform: scale(1);
}

.tn-wrapper:hover {
  z-index: 1;
  transition: all 200ms ease-in;
  transform: scale(1.5);
  height: 300px;
}

.thumb-box {
  background: lightgray;
  height: 150px;
  width: 150px;
}

.descr-box {
  background: gray;
  height: 150px;
  width: 150px;
}
<div class="container">

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

</div>

Upvotes: 0

Views: 1829

Answers (2)

Kinburn101
Kinburn101

Reputation: 1162

I'm not sure if this is the desired look you're trying to achieve but check out this example

I've added a flexbox to your container, changed your transform-origin and utilized the appropriate margins to keep your spacing.

.container {
 margin-top: 75px;
 text-align: center;
 border: 2px solid black;
 padding: 5px;
 display:flex;
 justify-content:center;
}

.tn-wrapper {
 display: inline-block;
 position: relative;
 border: 0;
 margin: 5px;
 height: 150px;
 transition: all 200ms ease-in;
 transform: scale(1);
 transform-origin:top;
 }

.tn-wrapper:hover {
  z-index: 1;
  transition: all 200ms ease-in;
  transform-origin:top;
  transform: scale(1.5);
  margin:5px 43px 305px 43px;
  }

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273011

You can update your code like below. You fix the alignment of the inline-block elements (not mandatory but to make sure they will stay at the top) and you adjust the height of the description instead of the parent element.

.container {
  margin-top: 75px;
  text-align: center;
  border: 2px solid black;
  padding: 5px;
}

.tn-wrapper {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 5px;
  height: 150px;
  transition: all 200ms ease-in;
  transform: scale(1);
  vertical-align:top; /* added */
}

.tn-wrapper:hover {
  z-index: 1;
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

.thumb-box {
  background: lightgray;
  height: 150px;
  width: 150px;
}

.descr-box {
  background: gray;
  height: 0;
  width: 150px;
  overflow:hidden;
  transition: all 200ms ease-in;
}
.tn-wrapper:hover  .descr-box{
  height: 150px;

}
<div class="container">

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

</div>

Upvotes: 3

Related Questions