TAG
CSS
Result
Run
License
<div class="wrap"> <div class="box-wrap"> <div class="box">Rollover me</div> <div class="box">Rollover me</div> </div> <div class="box-wrap"> <div class="box">Rollover me</div> <div class="box">Rollover me</div> </div> </div>
.wrap { display: flex; justify-content: center; gap: 100px; margin-block-start: 50px; } .box-wrap { position: relative; flex-basis: 100px; height: 100px; } .box { position: absolute; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; left: calc((100px - 50px) / 2); } .box:nth-child(1) { border: 1px dashed #CCC; } .box:nth-child(2) { background-color: red; } .box-wrap:nth-child(1) > .box:nth-child(2):hover { transform: rotate(45deg); } .box-wrap:nth-child(2) > .box:nth-child(2):hover { width: calc(100px * cos(45deg)); height: calc(100px * cos(45deg)); transform: rotate(45deg) translate(30%); }
Console
expand_less
License
License
by DevDic
Close