Kép nagyítás hoverre, dobozon belül

Design igényként merülhet fel, hogy egy kép megmozduljon. Azonban még az egyszerűbb nagyítás esetén is alap probléma, hogy a kép méret növekedésével a körülötte lévő tartalmak elmozdulnak a helyükről. Az alábbi egyszerű megoldással ez kiküszöbölhető. Az egyetlen feltétel, hogy működhessen, hogy a képnek egy önálló div-ben kell lennie.

.el-item .uk-media {
overflow:hidden;
}
.el-item .uk-media .el-image {
transition: 300ms ease;
}
.el-item .uk-media .el-image:hover {
transform: scale(1.05);
transform-origin: 50% 50%;
}

Az alábbi CSS uikit alapú oldal mintája alapján íródott fel, de természetesen más rednszerekben is működik. A kép a mellékelt kód alapján 5%-al nő.

dizájn, css, html