CODEWITHSUNDEEP
htmlcss
kittydragon
kittydragon

Reputation: 21

CSS enlarging images on hover

I'm fairly new to coding, and I'm currently working on a website with pages that contain images. I want to have these images displayed small on the page, but have them enlarge as you hover on them. This code I'm using is working, but there's a small issue I can't seem to solve. This is the CSS code I'm using:

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

The problem I'm having is that if I don't use the float function in CSS, the images will also be enlarged if you hover at the same vertical height as the images as opposed to also having to hover on the same horizontal position, which is quite annoying. I don't want to have it float:left because that interferes with the rest of my page. I'd really like some help with this because whatever I do, it doesn't seem to solve the problem. Thanks in advance for helping me out.

Edit: HTML code:

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

Upvotes: 2

Views: 5345

Answers (2)

kittydragon
kittydragon

Reputation: 21

Changing the code from

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

to

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

solved the problem. Thanks for your help (especially @Ariel)!

Upvotes: 0

edlee
edlee

Reputation: 675

On the whole. Don't use ID tags as your selector, use class instead. The will catch you out... read more

Let you image scale to the div that wraps it, then control the wrapping div. And, you should not have no issues. 

.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%;
}

Upvotes: 2

Related Questions