HTML/CSS image overlay

Question

Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).

The plan was to display another transparent "play button" image over top of the content image using markup like this:

            <div class="media">
                <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
                    <img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
                </a>
            </div>

This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?

Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:

W x H 400 x 200 400 X 300 400 X 400

The Play button needs to be centered in each image.

Hey Brian, Im sure the guys who took the time to answer your question would be greatful for a response or even better for one of their answers to be marked as accepted. — Phill Healey
– Phill Healey, Commented Jul 2, 2013 at 17:31

Spudley · Accepted Answer · 2010-10-25 16:07:58Z

Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.

<div class="media">
  <a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
    <div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
  </a>
</div>

You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.

(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)

Xarcell · Accepted Answer · 2013-05-25 17:05:53Z

0

Need some your CSS to make sure things work, but this may help you:

.media { 
    display: table; 
}
.media img { 
    display: table-cell; 
    vertical-align: middle; 
    display: block; 
    margin: 0 auto; 
}

If not, please add you CSS so I can Fiddle it and make it happen.

answered May 25, 2013 at 17:05

Xarcell

2,0216 gold badges36 silver badges66 bronze badges

Comments

Mark Ryan Sallee · Accepted Answer · 2013-05-25 17:28:05Z

0

I'd do it like this.

<div class="media">
    <a class="videoLink" href="#"></a>
    <img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>

Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.

The CSS:

.media {
    position: relative;
}

.videoLink {
    display: block;
    height: 100%;
    width: 100%;

    background-image: url(PlayButton.png);
    background-position: center center;

    position: absolute;
    z-index: 2;
}

edited May 25, 2013 at 17:28

answered May 25, 2013 at 17:22

Mark Ryan Sallee

2931 silver badge9 bronze badges

Collectives™ on Stack Overflow

HTML/CSS image overlay

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related