Question

I have an image that only appears if it has some content in it’s ALT attribute. THis works well using:

  img.video[alt=""] {
    display:none;
    height:0px;
}

However I want the image to also have an overlay that will also dissappear… the overlay is a play button, but it stays.

          <li>
            <img class="video" src="<?php echo $row_rs_dealItem['imagemain']; ?>" alt="<?php echo $row_rs_dealItem['video']; ?>">
              <img id="videoLogo" src="images/video.png"/>
            </img>
          </li>

Is there a better way to solve this?

thanks guys

Answer 1

Yes, there is, you must use the adjacent sibling selector, because img elements can’t have childs.

The HTML :

<li>
    <img class="video" src="..."   alt="...">
    <img class=v src="images/video.png">
 </li>

And the CSS :

img.video[alt=""], img.video[alt=""] + img.v {
    display:none;
    height:0px;
}