使用 css 在图像顶部播放图标

Question

我想在图像顶部放置一个播放图标，该图标会重定向到 youtube 页面。我还希望在图像和图标上有悬停效果，图像获得黑色背景，不透明度为 0.5，而图标只是改变颜色。但我仍然坚持在图像中间获取图标。我的 jsfiddle：https ://jsfiddle.net/rgL0ebj7/ 。

我的代码：

.module-box {
display: inline-block;
position: relative;
width: 100%;}

.module-dummy {
margin-top: 100%;}

.module-body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;}

.play-button-div {
margin: 0 auto;
position: relative;
width: 100%;}

.play-button-icon i{
width: 100px;
height: 100px;
color: #0080ff;
background-color: #fff;
border-radius: 55px;
border: 2px solid #0080ff;
font-size: 80px;
text-align: center;
position: absolute;
padding-top: 10px;
padding-left: 10px;}

谢谢！

Answer 1

检查这个没有任何负边距的简单解决方案：

.play-button-div {
  position: relative;
  display: inline-block;
}
.play-button-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
}