Overlay Effect On Hover

간만에 공부해보는 CSS 

 

쪼렙이라 쉽지 않은데, 마우스를 Hover 하면 div 태그 위에 반투명 overlay가 뜨면서 다른 글자나 또는 형태를 CSS로 정리 

 

<div class="rect">
      rect
      <div class="overlay">text</div>
</div>

 

div 태그 안에 div 자식을 만들어둔다. 

안에 있는 요소가 overlay 가 될 친구이다.

.rect {
  position: relative;
  width: 100px;
  height: 100px;
  background: -webkit-linear-gradient(bottom left, #793ad3 0%, #bbf0d3 100%);
  background: -moz-linear-gradient(bottom left, #793ad3 0%, #bbf0d3 100%);
  background: -o-linear-gradient(bottom left, #793ad3 0%, #bbf0d3 100%);
  background: linear-gradient(to top right, #793ad3 0%, #bbf0d3 100%);
  overflow: hidden; 
  border: solid;
  border-radius: 10px;
  border-color: white;
  align-content: center;
  text-align: center;
}

.overlay {
  position: absolute;
  color: white;
  width: 100%;
  height: 0;
  background-color: black;
  bottom: 0;
  opacity: 0.5;
  transition: height 1s cubic-bezier(0.5, 0, 0.2, 1);
}

.rect:hover .overlay {
  height: 30%;
}

 

 

 

 

position: relative가 설정되어 있으면 부모 요소를 기준으로 위치가 계산 되고, absolute와 bottom: 0을 사용하여 overlay를 부모의 하단에 고정한다.

 

그리고 hover하면 0부터 30%까지 올려야 하기 때문에 :hover 옵션을 통해 height를 30퍼까지 올린다.

 

transition은 효과를 주기 위함.

 

 

https://codesandbox.io/p/devbox/3lth25?embed=1&file=%2Findex.html&showConsole=true

https://codesandbox.io/p/devbox/3lth25?embed=1&file=%2Findex.html&showConsole=true