CSS увеличение изображений при зависании

Question

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

#image img { 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
#image:hover img { 
    width: 200%; 
    height: 200%; 
} 

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

Edit: HTML-код:

<div id = "image"> 
    <img src = "image.png" alt = "image example"> 
</div> 

Answer 1

В целом. Не используйте теги идентификаторов в качестве селектора, вместо этого используйте класс. The will catch you out ... read more

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

.image-wrapper img { 
    max-width: 100%; 
} 
.image-wrapper { 
    width: 100%; 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
.image-wrapper:hover { 
    width: 200%; 
    height: 200%; 
} 

Answer 2

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

#image img { 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
#image:hover img { 
    width: 200%; 
    height: 200%; 
} 

в

#image img { 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
#image img:hover { 
    width: 200%; 
    height: 200%; 
} 

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