Harwinder Singh Harwinder Singh - 5 months ago 6
CSS Question

How to control the div within the div?

Hover the mouse on the blue box; the blue box will rotate 170 degrees but it overlaps the parent

div
. I want to rotate the blue box without overlapping the parent
div
.



.box {
width:250px;
height:250px;
background:red;
}
.box_inside {
position:absolute;
width:250px;
height:250px;
background:blue;
transition:all 0.7s linear;
}
.box_inside:hover {
-ms-transform: rotate(170deg);
-webkit-transform: rotate(170deg);
transform: rotate(170deg);
}

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




Answer

If I understand you correctly, you looking for overflow:hidden for the parent. You need to add position:relative too.

.box {
  width:250px;
  height:250px;
  background:red;
  overflow:hidden;
  position:relative;
}
.box_inside {
  position:absolute;
  width:250px;
  height:250px;
  background:blue;
  transition:all 0.7s linear;
}
.box_inside:hover {
  -ms-transform: rotate(170deg);
  -webkit-transform: rotate(170deg);
  transform: rotate(170deg);
}
<div class="box">
  <div class="box_inside"> </div>
</div>

Comments