1

Нужно сделать увеличение фото при наведении. Для этого использую css свойства:

transform:scale(1.6);
transition: all 0.3s linear 0.3s;

Но при таком варианте при увеличении закрывается текст, расположенный снизу фото. Можно ли сделать увеличение так чтобы нижний край фото оставался на прежней линии? То есть фото увеличивалось но как бы вверх.

1
  • 1
    transform-origin: 50% 100%; Commented 6 мая 2018 в 17:01

1 ответ 1

2

Это можно сделать используя свойство transform-origin.

.blck{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #ccc;
  margin: 0 auto;
  transform-origin: 50% 100%;
  transition: all 0.3s linear 0.3s;
}
.blck:hover{
  transform:scale(1.6);
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit odio atque dignissimos reiciendis? Inventore, nisi magnam repudiandae quae distinctio voluptate excepturi mollitia alias voluptatibus blanditiis nostrum amet sapiente laboriosam architecto accusamus. Nam accusamus nostrum accusantium sapiente repellat hic? Natus similique a illum tempore minus esse error, consequuntur sapiente facere officiis  doloribus ab possimus illum saepe minus accusantium sapiente magnam, excepturi quo voluptatum voluptates delectus dolorem pariatur ad rem amet cumque eius. Eligendi facilis consequuntur veritatis quis nostrum.</p>
<div class="blck">some text</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit odio atque dignissimos reiciendis? Inventore, nisi magnam repudiandae quae distinctio voluptate excepturi mollitia alias voluptatibus blanditiis nostrum amet sapiente laboriosam architecto accusamus. Nam accusamus nostrum accusantium sapiente repellat hic? Natus similique a illum tempore minus esse error, consequuntur sapiente facere officiis mollitia, fugiat fuga alias blanditiis exercitationem quo dolor ducimus suscati doloribus ab possimus illum saepe minus accusantium sapiente magnam, excepturi quo voluptatum voluptates delectus dolorem pariatur ad rem amet cumque eius. Eligendi facilis consequuntur veritatis quis nostrum.</p>

Ваш ответ

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

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