Увеличение картинки при наведении: Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

html — CSS увеличивает изображения при наведении

Задавать вопрос

спросил 6 лет, 7 месяцев назад

Изменено 6 лет, 7 месяцев назад

Просмотрено 5к раз

Я новичок в программировании и в настоящее время работаю над веб-сайтом со страницами, содержащими изображения. Я хочу, чтобы эти изображения отображались на странице маленькими, но увеличивались при наведении на них курсора. Этот код, который я использую, работает, но есть небольшая проблема, которую я не могу решить. Это код CSS, который я использую:

 # изображение изображение {
    -webkit-transition: ширина 1с, высота 1с;
    переход: ширина 1s, высота 1s;
}
# изображение: наведите курсор {
    ширина: 200%;
    высота: 200%;
}
 

Проблема, с которой я сталкиваюсь, заключается в том, что если я не использую функцию float в CSS, изображения также будут увеличены, если вы наведете курсор на ту же высоту по вертикали, что и изображения, а не наведите курсор на ту же горизонталь.

положение, что очень раздражает. Я не хочу, чтобы он был float:left, потому что это мешает остальной части моей страницы. Мне бы очень хотелось помочь с этим, потому что, что бы я ни делал, это, похоже, не решает проблему. Заранее спасибо за помощь.

Редактировать: HTML-код:

• HTML
• CSS

3

В целом. Не используйте теги ID в качестве селектора, вместо этого используйте класс. The поймает вас… читать дальше

Позволяет вам масштабировать изображение до div, который оборачивает его, а затем управлять оборачивающим div. И у вас не должно быть никаких проблем.

 .image-обертка img {
  максимальная ширина: 100%;
}
.изображение-обертка {
  ширина: 100%;
  -webkit-transition: ширина 1с, высота 1с;
  переход: ширина 1s, высота 1s;
}
.image-обертка: наведите {
  ширина: 200%;
  высота: 200%;
}
 

Изменение кода с

 #image img {
    -webkit-transition: ширина 1с, высота 1с;
    переход: ширина 1s, высота 1s;
}
# изображение: наведите курсор {
    ширина: 200%;
    высота: 200%;
}
 

до

 #image img {
    -webkit-transition: ширина 1с, высота 1с;
    переход: ширина 1s, высота 1s;
}
# изображение изображение: наведите {
    ширина: 200%;
    высота: 200%;
}
 

решил проблему. Спасибо за вашу помощь (особенно @Ariel)!

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

javascript — Как увеличить изображение при наведении курсора на изображение?

спросил

13 лет, 4 месяца назад

Изменено 5 лет, 6 месяцев назад

Просмотрено 28 тысяч раз

Я хочу, чтобы при наведении курсора на миниатюру отображалось большое изображение, подобное тому, что в

http://www. freelayouts.com/websites/html-templates Помогите пожалуйста. Любая помощь будет оценена.

• javascript
• jquery
• html
• css

Вам нужен плагин всплывающей подсказки. Их много. Посмотрите этот список: https://cssauthor.com/jquery-css3-hover-effects/

2

 
...
И на css:
.enlarge-onhover {
     ширина: 30 пикселей;
     высота: 30 пикселей;
}
.enlarge-onhover: hover {
     ширина: 70 пикселей;
     высота: 70 пикселей;
}
 

Взгляните на http://fancybox.net/blog

Fancybox выглядит красиво, использует JQuery и легко настраивается с различными эффектами отображения/скрытия. Учебник номер 3 на этой странице показывает, как использовать его при наведении курсора мыши, а не при нажатии кнопки

На домашней странице http://fancybox.net/home показаны некоторые примеры визуального эффекта