CODEWITHSUNDEEP
htmlcssoverlayshadowbox
jamesj
jamesj

Reputation: 1

how to overlay a play button png over a thumbnail image that links to a shadowbox vimeo video

how to overlay a play button png over a thumbnail image that links to a shadowbox vimeo video

The shadow box works, thats not the issue. The issue implementing the transparent Play button over the thumbnail

html:

enter code here
<div class="postsingle">

        <a href="http://player.vimeo.com/video/55138154" rel="Shadowbox" title="demo">
            <img class="demothumbnail" src="https://secure-b.vimeocdn.com/ts/410/203/410203139_640.jpg" alt="thumbnail image"> 
            <span class="playIcon"><img src="images\PlayButton.png">  </span>
        </a>

    </div>

css: .postsingle { margin:10px 4px 0 12px; border: 2px solid black; }

.demothumbnail{
    position: absolute;
    width: 400px; height: auto;
    z-index: 1;

}

.demothumbnail span.playIcon{
    float: auto;
    position:absolute;
     z-index: 0;
}

please help

Upvotes: 0

Views: 5801

Answers (1)

Terry
Terry

Reputation: 66218

Why the float: auto declaration?

The .playIcon span is NOT nested in .demothumbnail, that's why your CSS rule is not applying.

If you want the play icon overlay to stretch across the entire thumbnail, use:

.postSingle a {
    position: relative; /* The parent has to be set to relative */
}
.playIcon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

If you mean you want to select the direct sibling of .demothumbnail, then use: .demothumbnail + .playIcon. See more details on sibling and child selectors here.

p/s: Please use a Fiddle to illustrate your issue in the future.

Upvotes: 1

Related Questions