1

Как сделать, что бы картинка ровномерно увеличивалась? Сейчас она увеличивается вправо и вниз:

<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>
2
  • Попробуйте использовать свойство transform. Пример: jsfiddle.net/fabric/0aywfjqq 18 янв 2016 в 11:17
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 20 янв 2016 в 1:22

1 ответ 1

2

Для масштабирования изображения можно использовать свойство transform и функцию для него scale(x, y), где первым аргументом будет масштаб по горизонтали, а второй по вертикали.

Пример:

img {
  display: block;
  transition: transform 0.2s ease;
}
img:hover {
  cursor: pointer;
  transform: scale(1.5);
}
<img src="http://lorempixel.com/200/200/" alt="">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.