Как сделать, что бы картинка ровномерно увеличивалась? Сейчас она увеличивается вправо и вниз:
<img style="position:absolute; top:760px; left:160px;" src="assets/img/bas.png" alt="" class="img-header">
<img style="position:absolute; top:670px; left:1340px;" src="assets/img/fontan.png" alt="" class="img-header">
<img style="position:absolute; top:750px; left:870px;" src="assets/img/pog.png" alt="" class="img-header">
<img style="position:absolute; top:750px; left:1150px;" src="assets/img/drena.png" alt="" class="img-header">
<img style="position:absolute; top:430px; left:920px;" src="assets/img/col.png" alt="" class="img-header">
<img style="position:absolute; top:550px; left:200px;" src="assets/img/gibrid.png" alt="" class="img-header">
<style>
.img-header {
width:150px;
transition: opacity 1s, width 1s;
opacity:0;
}
.img-header:hover {
width:250px;
opacity:1;
cursor:pointer;
}
</style>
transform
. Пример: jsfiddle.net/fabric/0aywfjqq