Utilizzo di bordi con transizioni

[KillerWorm]

Ciao, quel CSS preso da solo funziona correttamente. Il bordo outline si vede e resta visibile anche all'hover.

Da quanto hai indicato ho l'impressione che l'elemento contenitore (.link o chi per lui) abbia un overflow:hidden o comunque l'immagine è ritagliata al suo interno.

Se così fosse, dal momento che immagine_griglia viene ingrandito, è abbastanza logico che il contorno, compreso l'outline, risulta non visibile essendo tagliato fuori dall'elemento contenitore.

In tal caso una soluzione può essere quella di applicare outline al contenitore, piuttosto che al contenuto.

Fai sapere se il problema dipende da questo altrimenti cerca di chiarire meglio il contesto fornendo un esempio completo per poter riprodurre il problema.

[ivanisevic82]

Ciao, quel CSS preso da solo funziona correttamente. Il bordo outline si vede e resta visibile anche all'hover.

Da quanto hai indicato ho l'impressione che l'elemento contenitore (.link o chi per lui) abbia un overflow:hidden o comunque l'immagine è ritagliata al suo interno.

Se così fosse, dal momento che immagine_griglia viene ingrandito, è abbastanza logico che il contorno, compreso l'outline, risulta non visibile essendo tagliato fuori dall'elemento contenitore.

In tal caso una soluzione può essere quella di applicare outline al contenitore, piuttosto che al contenuto.

Fai sapere se il problema dipende da questo altrimenti cerca di chiarire meglio il contesto fornendo un esempio completo per poter riprodurre il problema.

Ciao Worm, hai centrato il punto, c'è un overflow:hidden e la conseguenza è esattamente quella che hai descritto.

Ho provato ad applicare l'outline all'elemento contenitore, ma continua a non funzionare.

Considera inoltre che la dimensione delle immagini è flessibile, per essere responsive.

Ho provato ad applicare l'outline sia al div contenitore dell'immagine (sul quale c'è l'overflow:hidden), sia ad un ulteriore div contenitore che ho aggiunto.

In entrambi i casi senza successo.

Vorrei postare un link ma sto lavorando in locale di mamp e non saprei come fare.

Provo a postare una porzione di codice più ampia:

  <div class="contenitore_immagine_griglia">    <div class="img-parent">
      <img src="http://localhost/wp-content/themes/bonlawtemplate 9/images/XXX.jpg" class="immagine_griglia">
    </div>
</div>

.link .immagine_griglia {vertical-align: middle;
transition: transform .3s ease, filter .3s ease-in-out;
filter: brightness(100%);
outline: solid 1px #888;
outline-offset: -1px;
}


.link:hover .immagine_griglia { 
transform: scale(1.2);
filter: brightness(70%);
}


.img-parent {
overflow: hidden; 
}


.contenitore_immagine_griglia{
outline: solid 10px #000;
outline-offset: -10px;
}