Question

I have a seemingly simple html construct:

<div class="featured-image img-wrapper full-width">
  <a href="http://localhost/wordpress/?p=26">
    <img ... />
  </a>
</div>

Now I want to target the a (which unfortunately does not have its own class), so I use this CSS

.img-wrapper a {
  background-image:url(../images/bkgs/stripes_tiny_08.png);
  background-repeat:repeat;
}

but nothing happens to this a element! It’s certainly not the background image itself, also tried a simple color. The weird thing is: there is another, similar construct further up on the page and there the selector works!
Firebug shows the following CSS paths (the target a is at the end)

working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a

I’m out of ideas. Haven’t found any overriding CSS declarations. Any idea how I can target that a?

EDIT: the target a contains an img which has a :hover opacity set. That way I can see that the background color works, not the background image however

Answer 1

Are you trying to do this effect? http://jsfiddle.net/r48ST/1/

[EDIT]: This is that effect http://jsfiddle.net/r48ST/2/ , just added some opacity on image. Also, put some transition effect on opacity an you have full effect.