Play button overlay image using CSS

This article explores techniques for centrally overlaying a play button image onto another image using CSS. Several approaches are presented, each with varying degrees of browser compatibility.

The Most Effective Method

This approach provides excellent results across modern browsers and even works well with IE8 and later versions. You can find a working example on jsfiddle.net/SdsJ9/1/ (link provided in original text).

Previous Attempts

Several earlier attempts are documented, each with its own strengths and weaknesses regarding cross-browser compatibility. These can be found at jsfiddle.net/YAuKb/1/ and jsfiddle.net/YAuKb/6/ (links from original).

CSS

#container {
    position: relative;
    display: inline-block;
    border: 1px solid green; /* For demonstration purposes */
}

#container * {
    box-sizing: border-box; /* For consistent box model across browsers */
}

#image {
    z-index: 9;
    text-align: center;
    border: 1px solid blue; /* For demonstration purposes */
}

#play {
    background: url('https://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
    position: absolute; /* Crucial for overlaying */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the button */
    height: 140px;
    width: 140px; /* Added for better control */
    z-index: 10;
}

HTML (Example)

<div id="container">
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174036457919668.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Play button overlay image using CSS " />
  <div id="play"></div>
</div>

Remember to replace "your-image.jpg" with the actual path to your image. The key improvement in this revised CSS is using position: absolute; and transform: translate(-50%, -50%); for precise centering within the container. The width property is also added to the #play element for better control over the button's size.

This improved example addresses the centering issue more effectively and provides a more robust solution for creating a play button overlay. The FAQs from the original text remain relevant and provide valuable supplementary information.

The above is the detailed content of Play button overlay image using CSS. For more information, please follow other related articles on the PHP Chinese website!