2016-06-23 22 views
1

Bild zoomen auf schweben, Bild halten zentriert

.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 auf schweben, die ich hinzufüge, 20% sowohl die Breite und die Höhe. Was perfekt funktioniert. Aber das Bild ist nicht zentriert und darum kämpfe ich. Beim Zoomen "wächst" das Bild einfach nach rechts. Irgendwelche Tipps?

Antwort

1

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>

+0

Perfekt! Vielen Dank :) – Tiwaz89

0

Sie können auch relative Positionierung auf das Bild anwenden und den linken, oberen bis -10%, -10% bzw. dies wird die Verschiebung Bild von wo es sein soll und die gewünschte Ausgabe erreichen.

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