эффект масштабирования изображения при наведении курсора мыши

#html #css

#HTML #css

Вопрос:

Идея состоит в том, чтобы создать эффект масштабирования при наведении курсора мыши. Но поскольку высота задана автоматически, увеличенное изображение не содержится в div и увеличивается в высоту. Я должен сохранить высоту ‘auto’ для целей адаптивного дизайна. Мы были бы признательны за выход. Ниже приведена ссылка: http://jsfiddle.net/nitish_8/zaeZ4 /

 <div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>

Ответ №1:

попробуйте следующий код для наведения курсора мыши на элемент div, надеюсь, это поможет вам

 .item:hover img {
    -webkit-transition: all 21s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: al 1s ease-in-out;
    transition: all 1s ease-in-out;
    transform:  scale(1.1) ;
    -webkit-transform:scale(1.1) ;
    -moz-transform:  scale(1.1) ;
    -o-transform:  scale(1.1)  ;
    -ms-transform: scale(1.1)  ; 
 }

1. Извините, но это не помогает. на всякий случай, если я не был ясен в своем вопросе, я хочу сказать еще раз — я хочу, чтобы высота div оставалась постоянной, а масштаб изображения в пределах этого div. Значение ‘auto’ для высоты div помогает высоте div увеличиваться вместе с высотой изображения. Я этого не хочу.

2. Я думаю, что это не работает в jsfiddle, но отлично работает в Chrome и IE. Я это протестировал.

Ответ №2:

Я думаю, вы можете удалить ovewflow атрибут из item класса, чтобы div не обрезать увеличенное изображение

1. Вся идея моего запроса заключается в том, что я могу обрезать изображение, когда оно увеличивается в высоту. Я хочу, чтобы высота div оставалась постоянной, а изображение увеличивалось в пределах этого div. Теперь высота div увеличивается вместе с изображением, поскольку оно включено «автоматически».

Ответ №3:

код из TalkersCode.com вот полное руководство http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

 .item img 
{
 max-width: 100%;
 -moz-transition: all 0.3s;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 width:250px;
 height:220px;
}
.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}