应用变换缩放功能时如何防止隐藏背景图像

Question

最近我想将过渡和变换应用到 div 并且发生了一些非常有线的事情。

我的div结构是这样的：

    .img img {
      width: 234px;
      height: 140px;
      position: relative;
      display: inline-block;
      overflow: hidden;
      margin-bottom: 20px;
      transition: transform .5s; 
    }
     .img img:hover {
        transform: scale(1.2); 
    }
    .playWrapper{
      position: absolute;
      height: 32px;
      margin-top: 25%;
      width: 100%;
      display: block;
    }
    
    .playWrapper .playVideo{
      background: url('http://lorempixel.com/20/20/') 0 0 no-repeat;
      margin: 0 auto;
      display: inline-block;
      width: 32px;
      height: 32px;
    }

    <div class="img nlist">
     <div class="playWrapper">
         <div class="playVideo"></div>
        </div> 
        <img src="http://lorempixel.com/200/200/">
    </div>

有两件事我不知道该怎么做。一个是 playVideo div 没有居中对齐。另一个是当我将鼠标悬停在 img 上时，img 缩放，但是 playVideo png 会消失，当我将鼠标移出 img 时，缩放返回到 1 并且 playVedio png 再次出现。

有谁知道当鼠标悬停在 img 上时如何使 png 可见以及当父级必须是绝对位置时如何对齐 div 的中心？

Answer 1

One is the playVideo div is not aligned center.

要使所有内容始终居中，只需向父级添加 text-align: center 规则。

The other one is when I hover over the img, the img scales, but the playVideo png would disappear, and when I put my mouse out of the img, the scale returned back to 1 and the playVedio png appears again.

这可以简单地通过向 .playWrapper 添加 z-index 来解决，以使其保持在容器的顶层。

CSS 变化

.img { text-align: center; }

.playWrapper { z-index: 1; }

工作示例

.img {
  text-align: center;
  position: relative;
}
.img img {
  width: 234px;
  height: 140px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: transform .5s;
}
.img img:hover {
  transform: scale(1.2);
}
.playWrapper {
  position: absolute;
  height: 32px;
  bottom: 0;
  width: 100%;
  display: block;
  z-index: 1;
}
.playWrapper .playVideo {
  background: url('http://lorempixel.com/20/20/') 0 0 no-repeat;
  margin: 0 auto;
  display: inline-block;
  width: 32px;
  height: 32px;
}

<div class="img nlist">
  <div class="playWrapper">
    <div class="playVideo"></div>
  </div>
  <img src="http://lorempixel.com/200/200/">
</div>

应用变换缩放功能时如何防止隐藏背景图像

how to prevent background-img hidden when apply transform scale function

css

css-transforms