There is such a site on it there are elements (BEDROOM / KITCHEN / LIVING ROOM) which, when hovering, are scaled without changing their size. I know there is a transform:scale() but it increases the size, how to make it like the site?

    1 answer 1

    Simplest example

     div.block { position: relative; width: 200px; height: 147px; cursor: pointer; overflow: hidden; } div.block img { width: 100%; height: 100%; transition: all .3s ease-out; } div.block:hover img { transform: scale(1.2); } div.block div.title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); transition: all .3s ease-out; } div.block:hover div.title {background-color: rgba(255, 255, 255, 0.39);} div.block div.title h1 { display:block; position:absolute; top:50%; left:50%; opacity: 0; transition: all .3s ease-out; transform: translate(-50%,-50%); } div.block:hover div.title h1 {opacity:1} 
     <div class="block"> <img src="http://deerdesign.vn/wp-content/uploads/2016/10/PK_Scandinavian-Vintage-1024x755.jpg"> <div class="title"> <h1>Текст</h1> </div> </div>

    • For some, the simplest, but for me, while higher mathematics) Thank you, I will disassemble. - adckiykpolb