28172 sujets

CSS et mise en forme, CSS3

Zoom sans redimensionnement avec transform: scale() et overflow

Bonsoir,

Après plus de 2 heures à chercher, en vain, je viens vers vous pour obtenir de l'aide. Le code est en ligne sur codepen: http://codepen.io/anon/pen/dNegXL

J'utilise Grillade pour gérer facilement la mise en page.

Pour expliquer ce que je souhaite obtenir, il faut s'imaginer qu'à droite (les 4 carrés) sont des images (mises avec background-image), et que le scale() doit permettre un zoom dans l'image. En théorie c'est très simple à réaliser, en cumulant le scale avec l'overflow:hidden. Le problème c'est que je ne sais pas, dans ce cas-ci, où placer l'overflow.

Quelqu'un pour m'orienter/m'aider ?

Merci beaucoup.
Modérateur
tu peut utilisé le positionnement .

.layout__items { 
  overflow: hidden;
}

.layout__items .layout__item {
  height: 200px;
  position:relative;
}

ou background-size ? http://codepen.io/anon/pen/jyKNzG
.layout__items .layout__item:hover {
  background-size:115% auto ;/* ou auto 115% */
}

Modifié par gcyrillus (04 Feb 2017 - 11:46)
Merci pour ta réponse. Ta première solution (ajouter une position relative) ne change rien.

Quant-à la deuxième, je ne peux pas l'utiliser, mes backgrounds doivent obligatoirement être en background-size: cover, pas de pourcentage possible.
Modifié par xxFyl (06 Feb 2017 - 09:51)
Modérateur
si le position:relative seul ne marche pas (fonctionnais dans ff pour moi , pas tester plus loin ) , il faut l'appuyer avec un z-index: z-index:1; par defaut (tous) et z-index:0; sur hover.

http://codepen.io/anon/pen/egPYaQ
Modifié par gcyrillus (08 Feb 2017 - 22:39)
Sujet clos
Aller à