Opazität beim Schweben nur anwenden, wenn das Bild verlinkt ist

Question

Ich benutze weebly um eine Seite zu hosten - auf meiner About Seite habe ich mehrere Bilder. Einige der Bilder sind miteinander verknüpft, andere nicht. Ich würde die Bilder mögen, die Links sind Opazität zu haben, wenn Sie über sie schweben, und ich erreicht dies durch:

.wsite-page-about .wsite-multicol-col img:hover{ 
opacity: 0.70; 
transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-webkit-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
} 

Aber das macht alle Bilder die Opazität auf schweben gewinnen. Wie kann ich das nur anwenden, wenn das Bild verlinkt ist?

Answer 1

Fügen Sie an der Vorderseite Ihres CSS eine a hinzu, um Bilder auszuwählen, die ein Kind eines <a> sind. Etwas wie:

.wsite-page-about .wsite-multicol-col a img:hover { 
 
    opacity: 0.70; 
 
    transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -webkit-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
} 
 
img { 
 
    width: 100px; 
 
}

<div class="wsite-page-about"> 
 
    <div class="wsite-multicol-col"> 
 
    <a href="#hovered"><img src="http://www.hover.com/assets/home/og_hover-ecd9c237693419342687076277876b71ed0868105bbe3bc321ec844af7bbd38d.png"/></a> 
 
    <br /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/A_LAKE_A_LANE_A_LINE_A_LONE_-_bpNichol.jpg/800px-A_LAKE_A_LANE_A_LINE_A_LONE_-_bpNichol.jpg"> 
 
    </div> 
 
</div>

Answer 2

Wenn Ihr Bild ungefähr so ​​aussieht, (d) innerhalb Tag dann angewendet Opazität auf schweben funktionieren sollte.

HTML

<a href = "#"><img src = "img.jpg" /></a> 

CSS

a > img:hover{ 
opacity:0.70; 
transition: 0.6s ease; 
-webkit-transition: 0.6s ease; 
-moz-transition: 0.6s ease; 
-ms-transition: 0.6s ease; 
-o-transition: 0.6s ease; 
}