CODEWITHSUNDEEP
htmlcsssass
user818700
user818700

Reputation:

Image zoom on hover, keep image centred

.featured-items__image-container {
    height: 250px;
    overflow: hidden;
    width: 370px;
}

.featured-items__item-image {
    @include animate(all, 500ms);
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.featured-items__item-image:hover {
    height: 120%;
    width: 120%;
}
<div class="featured-items__image-container">
    <img class="featured-items__item-image" src="https://unsplash.it/370/250"/>
</div>

So on hover, the I'm adding 20% to both the width and the height. Which works perfectly. But The image isn't centred and that's what I'm struggling with. So on zoom the image just sort of "grows" to the right. Any tips?

Upvotes: 1

Views: 80

Answers (3)

stuckoverflow
stuckoverflow

Reputation: 56

Instead of changing the height, it might be easier to use 'scale' in the transform property, which automatically centres the zooming.

.featured-items__image-container {
    height: 250px;
    overflow: hidden;
    width: 370px;
}

.featured-items__item-image {
    @include animate(all, 500ms);
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.featured-items__item-image:hover {
   transform: scale(1.2)
}

Upvotes: 0

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

You could also apply relative positioning to the image and set the left, top to -10%, -10% respectively, this is will shift the image from where it is supposed to be and achieve the desired output.

.featured-items__item-image:hover {
    height: 120%;
    width: 120%;
    position:relative;
    left:-10%;
    top:-10%;
}

Upvotes: 0

Roman Skydan
Roman Skydan

Reputation: 5748

Try this:

.featured-items__image-container {
    height: 250px;
    overflow: hidden;
    width: 370px;
}

.featured-items__item-image {
    @include animate(all, 500ms);
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.featured-items__item-image:hover {
    height: 120%;
    width: 120%;
    margin-left:-10%;
    margin-top:-10%;
}
<div class="featured-items__image-container">
    <img class="featured-items__item-image" src="https://unsplash.it/370/250"/>
</div>

Upvotes: 2

Related Questions