Hilfe bei Link-Hover-Effekt auf verlinkten Bildern

[dn3d_fanboy]

Hallo zusammen,
Ich habe hier noch ein CSS-Problem, dass mich gerade etwas verzweifeln lässt.
Und zwar erstelle gerade ein WordPress-Theme und setze folgen CSS-Effekt für Links im Contentbereich ein:

#page-content a {    padding: 0 5px;
        color: #094d73;
        background: rgba(255,255,255,0.5);
        display: inline-block;
        vertical-align: top;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
}
#page-content a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0972A5;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#page-content a:hover, #page-content a:focus, #page-content a:active {
  color: white;
}
#page-content a:hover:before, #page-content a:focus:before, #page-content a:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Nun habe ich allerdings auch Bilder im Content, die ebenfalls verlinkt sind und wo dieser Effekt dann logischerweise auch greift.
Ausprobiert habe ich jetzt schon einiges, aber ich bekomme diesen Hover-Effekt bei den Bildern nicht weg oder ich stehe komplett auf dem Schlauch. Hat von euch jemande eine Lösung parat?

Hier mal ein Link, wo man es sich ansehen kann:

(Siehe Bild unten "iGZ").

Ich danke euch schonmal im Voraus.

 

[Myhar]

Der hover-Effekt liegt nicht am Bild sondern am Link. (kommt vom a::before{ } . Du musst diesen Effekt eingrenzen und natürlich nur dort anwenden, wo er erwünscht ist. Oder umgekehrt, die Links ausschließen, die ihn nicht bekommen sollen.

 

[dn3d_fanboy]

Der hover-Effekt liegt nicht am Bild sondern am Link. (kommt vom a::before{ } . Du musst diesen Effekt eingrenzen und natürlich nur dort anwenden, wo er erwünscht ist. Oder umgekehrt, die Links ausschließen, die ihn nicht bekommen sollen.

Vielen Dank für deine Antwort. Das es mit dem :before zusammenhängt, habe ich auch schon angenommen.

Nur habe ich überhaupt keinen Plan, wie ich das speziell bei den Bildern ausschließe.

 

[Myhar]

Wie bereits gesagt: Das hängt nicht mit dem Bild, sondern mit dem Link zusammen. Grundlage von CSS nochmal ansehen: CSS wirkt immer nur auf das letzte Element, was angesprochen wird. Du kannst nicht sagen, alle Absätze, die ein Bild haben. Du wirst also einen der beiden Lösungsansätze, die ich dir bereits gepostet habe, umsetzen müssen.