CSS: po aktywowaniu Transformacji

Question

Struktura 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> 

ilustracje mają dropshadows tak border nie jest rozwiązaniem, ponieważ będzie to poza obrazem

granica jest po przejściu i działa płynnie na FF, ale nie w chrome lub innych przeglądarkach.

Oto kod, który skorzystało

#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; 
} 

Uwaga:

#small_gal 

jest tylko pojemnik każdy obraz jest zawinięty w div więc możemy realizować: po

Answer 1

Firefox 4+ jest jedyną przeglądarką, która obsługuje przenoszenie pseudoelementów, takich jak :before i :after.

Źródło: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

Answer 2

Przejścia CSS są wciąż w fazie eksperymentalnej w WebKit więc jest prawdopodobne, że został trafiony jakiś kant przypadków błąd z udziałem :: po pseudo-selektor. Proponuję omijać go całkowicie i zamiast tego po prostu przechodzić na wersję border-color. To działało dobrze w Chrome i 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

Można użyć przejścia CSS na pseudo elementów takich jak: before i: after jeśli można zdefiniować obiekt na samego elementu i użyć inherit w elemencie pseudo. W twoim przypadku zamiast przesuwania na opacity możesz umieścić przejście na 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>