Help me figure it out, I need that when the scale of any element of its z-index was always above the rest. Now z-index works as usual, the element which is lower in the DOM has higher priority. https://codepen.io/brezze/pen/aEjOdv
<div class="block"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="item item-orange">1</div> </div> <div class="col-lg-6"> <div class="item item-blue">2</div> <div class="item item-black">3</div> </div> </div> </div> </div> .item-blue { height: 50%; background-color: navy; width: 100%; } .item-orange { background-color: orange; height: 300px; } .item-black { background-color: #000; height: 50%; } .item { transition: all .2s ease; position: relative; z-index: 1; } .item:hover { transform: scale(1.1) } 