Make a custom shape in CSS for menu icon

Question

I have an svg icon for a website that I would like to make into a css shape so that I can make a custom effect on hover.

I am using pure CSS for this and am not sure I am approaching the problem correctly.

.wrapper {
   position: relative;
   height: 100vh;
}

.square {
   height: 40px;
   width: 40px;
   background-color: black;
   transition: all .2s;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.square:before {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

.square:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform-origin: 50%;
   transform: translate(-50%, -50%) rotate(90deg);
}

.square:hover {
   transform: scale(1.2) translate(-50%, -50%);
 }

 .square:hover .square:before {
   transform: scale(1.2);
 }

.square:hover .square:before, .square:hover .square:after {
   height: 4px;
}

<div class="wrapper">
  <div class="square"></div>
</div>

https://codepen.io/Portismouth/pen/ZEEXeVP

so far I am using a simple square with a cross created using the :before and :after psuedo-selectors. On hover, Im trying to make the square bigger and the lines thicker to give the impression i'm going for.

It's basically a 2 x 2 grid of squares that I want to expand out from the middle of the square on hover. Should I create a square with four separate squares or continue with my approach so far.

Thanks in advance.

Answer 1

Your code works correctly. If you want to hover and it'll expand from middle of square, don't use translate(-50%, -50%); when hover on square

.wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.square {
   height: 40px;
   width: 40px;
   background-color: black;
   transition: all .2s;
}

.square:before {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

.square:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform-origin: 50%;
   transform: translate(-50%, -50%) rotate(90deg);
}

.square:hover {
   transform: scale(2);
 }

<div class="wrapper">
  <div class="square"></div>
</div>