Question

How would I do the following, preferably just using CSS (but possibly jquery too) and PHP.

I have a div area, button_background, which has a background image. Inside that div is an A tag, which has a background that overlays the div’s background. (it’s a semi-transparent ‘play’ triangle png which overlays a still from a video). I would like to change the A tag’s background (to a darker triangle) on rollover.

From:

-------------
| ($still)  |
|     \     |
|      \    |
|      /    |
|     /     |
-------------

To

-------------
| ($still)  |
|    *\     |
|    **\    |
|    **/    |
|    */     |
-------------

Note that I’m generating this from PHP, and the button background image’s url is a variable called $still.

Here’s the rough html:

<div class="button_background">
  <a class="button_overlay" href="page.html"></a>  
</div>

Answer 1

you could use the darker image to start with and set the initial state in the CSS to a lower opacity.

a.button_overlay { background:url(images/triangle.png); opacity:0.5;}

on hover change the opacity to 1, IE will need a MS specific filter property.

You could also just use a sprite image (both dark and light versions of the triangle in the same single PNG image) and just change the background-position on hover.