[Résolu] Conteneur overflow:hidden + border:radius > img transform:

Bonjour,

Je tente de trouver une solution à une problématique : garder des coins arrondis (supérieurs) sur une image quand je passe celle-ci en transform: scale(); au survol d'un conteneur parent.

Ce image se trouve dans une div contenante en overflow:hidden et aux coins arrondis (of course). Par sécurité l'image elle aussi a la propriété border-radius (bug sous certains browers sinon).

Au survol, l'image est bien circoncise dans sa div contenante quand elle passe en scale, mais les coins arrondis ne demeurent pas. Une idée ?

Une page tags pour l'exemple : Grégoire le Grand.
Modifié par Olivier C (01 Dec 2018 - 13:32)

Apparemment c'est Chrome.

Transform:xx; provoque un reflow que tu peut en principe contenir dans le parent avec position:relative + z-index.
je dirais que si tu ajoute a ton conteneur de l'image:

position:relative;
z-index:1;

Cela devrit suffire a garder tes bords arrondis.

Bonjour,
As-tu essayé de remettre le border-radius dans le :hover ?

un exemple en ligne pour se convaincre ? http://codepen.io/anon/pen/fknse
HTML

<div>
  <img src="http://lorempixel.com/150/100/"/>
</div>
<div class="chrome">
  <img src="http://lorempixel.com/150/100/"/>
</div>

CSS

div {
  width:150px;
  height:100px;
  border-radius:1em;
  overflow:hidden;
  float:left;
  margin:0.25em;
}
img {
  transition:0.5s;
}
img:hover {
  transform:scale(2);
}
/* chrome */
div.chrome {
  position:relative;
  z-index:1;
}

Merci à vous, en particulier à toi gc-nomade. Ta solution est ok :

.img-top {
    overflow: hidden;
    border-radius: $r1 $r1 0 0;
    position: relative; /* @bugfix @affected Chrome */
    z-index: 0; /* @note Idem */
}

Modifié par Olivier C (25 Jul 2014 - 17:23)