Expanding absolute div from center to reveal child - html

Question

I want to have a(n absolutely-positioned) rectangular mask that expands on hover to reveal its (variable height) children. Right now the way that I'm achieving this is with an absolutely positioned div that changes its left, width and max-height values. However, I'd like to make it look like it's expanding from the middle instead of revealing from the top left--and all at the same time.
<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;
}
Here's a codepen: https://codepen.io/jraynolds/pen/OJJxpOm

Answer 1

#1 – Using clip-path
Compatibility: All modern browsers apart from Edge. IE10/11 and Edge provide limited support using url() only.
Example with clip-path
To crop the image, use clip-path: inset(). In this example, we have a 120 pixel box that is reduced to 0 on hover.
.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>
Example with url() (not working in Edge or IE)
There was an attempt!
Create an SVG like so:
<svg>
<clipPath id="square">
<rect />
</clipPath>
</svg>
and place that in the container. The div is given clip-path: url(#square) and the width, height, x and y coordinates are provided in the CSS and changed on hover.
.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 – Using Box-shadow
If you are working with solid background colours, a simple method is to use inset box-shadow to mask the contents of the container and then reduce the box shadow on hover.
.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>

Answer 2

This solution works, however, it uses the mask element as a child of the background element, not the other way round.
<div id="container">
<div id="background">
<div id="mask"></div>
</div>
</div>
You simply give the mask 100% border and zero dimensions and transition to zero border and 100% dimension (transparent). Mask must have elevated z-indez. Like so:
#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%;
}
Here's a pen:
https://codepen.io/jaycodist/full/MWWEpMx