CSS: Nach dem Übergang des Schwebers

Question

Die HTML -Struktur

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

Die Bilder haben also Dropshadows so border ist keine Lösung, da sie außerhalb des Bildes liegt

Der Rand hat Übergang und funktioniert reibungslos auf FF, aber nicht in Chrome oder anderen Browsern

Hier ist der Code, den ich verwendet habe

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

Notiz:

#small_gal

Ist nur der Behälter, das jedes Bild in ein DIV gewickelt ist, damit wir implementieren können: danach

Answer 1

Firefox 4+ ist der einzige Browser, der den Übergang von Pseudoelementen wie z. :before und :after.

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

Answer 2

CSS-Übergänge experimentieren immer noch in Webkit, sodass Sie wahrscheinlich einen Edge-Case-Fehler mit dem :: nach pseudo-selektor gemacht haben. Ich schlage vor, es insgesamt zu vermeiden und nur zu wechseln border-color stattdessen. Dies funktionierte gut in Chrome und 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

Sie können CSS -Übergänge für Pseudoelemente wie vor und: Nach: Nachdem Sie die Eigenschaft auf dem Element selbst definieren und verwenden können inherit im Pseudoelement. Also in Ihrem Fall anstatt einen Übergang auf die opacity, Sie könnten einen Übergang auf die 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>