CODEWITHSUNDEEP
csscss-transitions
drifterOcean19
drifterOcean19

Reputation: 392

CSS transition - expanding child div to its parent width and height

Here's what I got up to in terms of starting point - https://codepen.io/illianyh/pen/bGpJgma.

/*For IE CSS3 transition property works starting IE10*/
* {box-sizing: border-box;}
body {font-family: 'Playfair Display', serif; margin: 0;text-align: center}
h1 {font-weight: normal;color: #6A5953}
kbd {font-size: 0.9em;display:inline-block;line-height:1.1;}

div, h2, img {
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
h2 {
  color: #E39F81;
  text-shadow: 1px 1px 0 #FFE3BD;
}
h2:hover {
  text-shadow: 1px 1px 0 #FFE3BD, 2px 2px 0 #FFE3BD, 3px 3px 0 #FFE3BD, 4px 4px 0 #FFE3BD, 5px 5px 0 #FFE3BD;
  
}

.parent {
  width: 560px;
  height: 386px;
  margin: 0 auto;
  background: black;
  position: relative;
}

.box {
  width: 50%; 
  position: absolute;
  right: 0;
  top: 153px;
}

.four {
  width: 423px;
  height: 248px;
  background-color: #95A1B1;
  margin: 0 auto;
}
.four:hover {
  width: 500px;
  height: 300px;
  box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
}
<h1>CSS3 Transition examples</h1>
<div class="parent"></div>
<div class="box"><div class="four"><kbd>width, height, box-shadow</kbd></div></div>

</div>

How do I make the child to expand itself towards, inside and on top of the its parent instead of expanding itself on the outside.

Here's a diagram what I'm trying to achieve:

Initial state (the arrows represent the direction of the child expanding):

enter image description here

this is the final state and in the end the child div has the same width and height of the parent. The parent is now hidden behind the child: enter image description here

Upvotes: 1

Views: 2536

Answers (2)

Richard Hunter
Richard Hunter

Reputation: 2180

The solution is first to place the child inside the parent with position and size so that it is completely congruent with the parent (Let's call this the actual position of the child). Then you use the transform property with the scale and translate functions to position the child at its starting position. Finally, when the user hovers over the child, you reset the translate and scale values back to their defaults. This has the result of animating the child to the actual position.

.parent {
  width: 200px;
  height: 150px;
  margin: 0 auto;
  background: black;
  position: relative;
}

.box {
  transform: translate(100px, 53px) scale(0.5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: .5s ease-in-out;
  background: orange;
}

.box:hover {
   transform: translate(0, 0) scale(1);
}
<h1>CSS3 Transition examples</h1>

<div class="parent">
  <div class="box"></div>
</div>

This is a simplified version of the FLIP technique.

Upvotes: 2

xIsra
xIsra

Reputation: 915

  • Parent has fixed size with position relative
  • Child has percentage or any size type with position absoulte and top left positions related to parent fixed size (could be even percentage parent)
  • Transition works over known sizes

Here is an example i fixed for you: CODEPEN

.parent {
  position:relative;
  width: 560px;
  height: 386px;
  margin: 0 auto;
  background: black;
  position: relative;
  background: red;
}
.child {
  position:absolute;
  background: blue;
  height:70%;
  width: 50%;
  right: -20%;
  top:15%;
  box-shadow: 0 15px 15px -10px rgba(0,0,0, .5);
  transition: all 0.5s ease; 
}
.parent:hover .child{
  top: 0%;
  right: 0;
  width:100%;
  height:100%;
  box-shadow: 0 0px 0px 0px rgba(0,0,0, .5);
}
.text{
  position:absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Upvotes: 2

Related Questions