How to target specific img using css
<p>All,</p>

<p>I know there have been some posts about this issue but the suggestions dont seem to work. What am I doing wrong here? </p>

<p>This is the snippet. The first part in my <code>css</code> that is not commented out will apply the opacity to my two images on hover.</p>

<p>When removing the first block and commenting in the second block, its suppose to target only the delta.jpg image and apply the opacity, leaving the shh.png image to be unaffected.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wsite-image-border-none img:hover {
  opacity: 0.5;
}

/*
.wsite-image-border-none img[src="image\delta.jpg"]:hover {
  opacity: 0.5;
}
*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0"&gt;
 &lt;a&gt;&lt;img src="image\shh.png" alt="Picture" style="width:293;max-width:100%"&gt;&lt;/a&gt;
 &lt;a&gt;&lt;img src="image\delta.jpg" alt="Picture" style="width:293; max-width:100%"&gt;&lt;/a&gt;
 &lt;div style="display:block;font-size:90%"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I am trying to do this on my weebly site where I don't have 100% control over the HTML. Need to do this in CSS.</p>

<p>Thanks</p>