Donc, mon problème est que j’ai une image et que je règle son CSS pour avoir un
max-width: 100%
qui l’échelle à des résolutions inférieures (comme on le verra dans le violon ci-dessous). Ce que je veux, c'est que la transition prenne effet au centre de l'image.
Actuellement; et d'après ce que j'ai vu de la plupart des transitions que j'ai effectuées, les échelles se développent à partir du coin supérieur gauche.
voici mon violon: http://jsfiddle.net/Eolis/3ya98xh8/3/
Il suffit de remplacer width: 400px;
par transform: scale(2,2)
on :hover
.
img {
width: 100%; max-width: 100%;
}
div {
position: absolute; left: 20%; top: 20%;
width: 250px;
transition: all 2s ease-in-out;
}
div:hover {
transform: scale(2,2)
}
<div>
<a href="http://photobucket.com/images/cat" target="_blank">
<img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
</a>
</div>
Ajoutez ceci au div:hover
:
transform: translateX(-25%) translateY(-25%);
Voici le violon: http://jsfiddle.net/3ya98xh8/4/
peut tout aussi bien jeter ma solution au cas où elle serait utile à quiconque:
:: CSS ::
img {
width: 100%; max-width: 100%;
}
div {
position: absolute; left: 50%; top: 50%;
margin-left: -125px; margin-top: -100px;
width: 250px;
transition: all 2s ease-in-out;
}
div:hover {
margin-left: -200px; margin-top: -150px;
width: 400px;
}
:: HTML ::
<div>
<a href="http://photobucket.com/images/cat" target="_blank">
<img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
</a>
</div>
:: Fiddle ::http://jsfiddle.net/Eolis/3ya98xh8/5/