CSS: después de la transición de la libración

Question

La estructura HTML

<div id="small_gal"> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
</div> 

Las imágenes están teniendo DropShadows por lo border no es una solución, ya que será fuera de la imagen

La frontera es teniendo transición y funciona sin problemas en FF pero no en Chrome u otros navegadores

Aquí está el código que yo han utilizado

#small_gal div:hover{cursor: pointer;} 
#small_gal div:after { 
    content: ''; 
    position: absolute; 
    width: 112px; 
    height: 81px; 
    border: 3px solid #e27501; 
    left: 9px; top: 9px; 
    z-index: 9; 

    opacity: 0; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 
#small_gal div:hover:after { 
    opacity: 1; 
} 

Nota:

#small_gal 

es sólo el contenedor cada imagen se envuelve en un div para que podamos poner en práctica: después

Answer 1

Firefox 4 es el único navegador que admite la transición de pseudo-elementos como :before y :after.

Fuente: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

Answer 2

transiciones CSS son todavía experimentales en WebKit por lo que es probable que usted ha golpeado un poco de borde de los casos de errores que implica la :: después de pseudo-selector. Sugiero evitarlo por completo y simplemente hacer la transición al border-color. Esto funcionó bien en Chrome y Safari:

#small_gal div.p { 
    border: 2px solid transparent; 
    -webkit-transition: border-color 1s ease-in; 
} 

#small_gal div.p:hover { 
    border-color: orange; 
} 

Answer 3

Usted puede utilizar transiciones CSS de pseudo elementos como: before y: after si se puede definir la propiedad en el propio elemento y utilizar inherit en el elemento seudo. Entonces, en su caso, en lugar de poner una transición en el opacity, podría poner una transición en el border-color.

*, *:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#small_gal div { 
 
    border-color: transparent; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    -webkit-transition: border-color 0.5s ease-in-out; 
 
    -moz-transition: border-color 0.5s ease-in-out; 
 
    -o-transition: border-color 0.5s ease-in-out; 
 
    -ms-transition: border-color 0.5s ease-in-out; 
 
    transition: border-color 0.5s ease-in-out; 
 
} 
 
#small_gal div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-color: inherit; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#small_gal div:hover { 
 
    border-color: #e27501; 
 
} 
 
#small_gal div img { 
 
    display: block; 
 
    height: auto; 
 
    max-width: 150px; 
 
    width: auto; 
 
}

<div id="small_gal"> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
</div>