从中心展开绝对 div 以显示 child

Question

我想要一个 (n absolutely-positioned) 矩形蒙版，它在悬停时展开以显示其（可变高度）children。现在，我实现此目标的方法是使用绝对定位的 div 更改其 left、width 和 max-height 值。但是，我想让它看起来像是从中间展开，而不是从左上角展开——而且是同时进行的。

<div id="container">
 <div id="mask">
  <div id="background"></div>
 </div>
</div>


    #container {
     width: 300px;
     height: 300px;
     background-color: black;
    }

    #mask {
     width: 50px;
     max-height: 50px;
     position: absolute;
     top: 125px;
     left: 125px;
     overflow: hidden;

     transition: width 1s, max-height 1s, left 1s, top 1s;
    }

    #background {
     background-image: url(https://www.pngfind.com/pngs/m/299-2991041_memes-para-stickers-png-png-download-surprised-pikachu.png);
     background-size: contain;
     width: 150px;
     height: 125px;
    }

    #mask:hover {
     width: 150px;
     max-height: 1000px;
     left: 75px;
     top: 75px;
    }

这是一个代码笔：https://codepen.io/jraynolds/pen/OJJxpOm

Answer 1

这个解决方案有效，但是，它使用遮罩元素作为背景元素的子元素，而不是相反。

<div id="container">
  <div id="background">
    <div id="mask"></div>
  </div>
</div>

您只需为蒙版提供 100% 边框和零尺寸，然后过渡到零边框和 100% 尺寸（透明）。面膜必须具有升高的 z-index。像这样：

#container 
{
  width: 300px;
  height: 300px;
  background-color: black;
  position: relative;
}
#mask
{
  position: absolute;
  left: 0;
  top: 0;
  z-indez: 10;
  height: 0;
  width: 0;
  transition: 0.4s ease;
  border: 150px solid black;
}
#background 
{
  background-image: url(https://www.pngfind.com/pngs/m/299-2991041_memes-para-stickers-png-png-download-surprised-pikachu.png);
  background-size: contain;
  width: 300px;
  height: 300px;
  display: block;
  margin: 1rem auto;
}
#background:hover #mask
{
  border: 0 solid black;
  width: 100%;
  height: 100%;
}

这是一支笔： https://codepen.io/jaycodist/full/MWWEpMx

Answer 2

#1 – 使用 clip-path

兼容性： All modern browsers apart from Edge. IE10/11 Edge 仅使用 url() 提供有限支持。

剪辑路径示例

要裁剪图像，请使用 clip-path: inset()。在此示例中，我们有一个 120 像素的框，在悬停时缩小为 0。

.reveal {
  background: url(https://i.stack.imgur.com/3v1Kz.jpg) no-repeat;
  background-size: 150px;
  background-position: center;
  height: 300px;
  width: 300px;
  clip-path: inset(120px 120px 120px 120px);
  transition: clip-path 0.5s;
}

.reveal:hover {
  clip-path: inset(0 0 0 0);
}

/*for example*/
body {
  background: linear-gradient(to bottom right, black 0%, white 100%);
  height: 100vh;
}

<div class="reveal"></div>

使用 url() 的示例（不适用于 Edge 或 IE）

有一次尝试！

像这样创建一个 SVG：

<svg>
    <clipPath id="square">
         <rect />
    </clipPath>
</svg>

并将其放入容器中。 div 给出 clip-path: url(#square)，宽度、高度、x 和 y 坐标在 CSS 中提供并在悬停时更改。

.reveal-url {
  background: url(https://www.pngfind.com/pngs/m/299-2991041_memes-para-stickers-png-png-download-surprised-pikachu.png)
    no-repeat;
  background-size: 150px;
  background-position: center;
  height: 300px;
  width: 300px;
  clip-path: url(#square);
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
}

.reveal-url rect {
  transition: all 0.5s;
  x: 120px;
  y: 120px;
  width: 60px;
  height: 60px;
}


.reveal-url:hover rect {
  width: 100%; 
  height: 100%;
  x: 0;
  y: 0;
}

/*for example*/
body {
  background: linear-gradient(to bottom right, black 0%, white 100%);
  height: 100vh;
}

h1 {
  font-size: 30px;
  color: white;
}

<h1>This only works in Chrome and Firefox.</h1>

<div class="reveal-url">
  <svg>
      <clipPath id="square">
     <rect />
      </clipPath>
  </svg>
</div>

#2 – 使用盒子阴影

如果您使用纯色背景，一个简单的方法是使用插图 box-shadow 来遮盖容器的内容，然后减少鼠标悬停时的框阴影。

.reveal {
  background: #000 url(https://www.pngfind.com/pngs/m/299-2991041_memes-para-stickers-png-png-download-surprised-pikachu.png) no-repeat;
  background-size: 150px;
  background-position: center;
  height: 300px;
  width: 300px;
  box-shadow: inset 0 0 0 120px #000;
  transition: box-shadow 1s;
}

.reveal:hover {
  box-shadow: inset 0 0 0 70px #000;
}


/*for example*/

body {
  background: #000;
}

<div class="reveal"></div>

从中心展开绝对 div 以显示 child

Expanding absolute div from center to reveal child

html

css

absolute

#1 – 使用 clip-path

剪辑路径示例

使用 url() 的示例（不适用于 Edge 或 IE）

#2 – 使用盒子阴影