중앙에서 절대 div를 확장하여 자식 표시

debugcn 에 게시 Dev

재스퍼 R.

나는 (가변 높이) 자식을 나타 내기 위해 마우스 오버시 확장되는 (절대 위치가 아닌) 직사각형 마스크를 원합니다. 지금 내가 이것을 달성하는 방법은 left , width 및 max-height 값 을 변경하는 절대 위치 div를 사용하는 것 입니다. 그러나 왼쪽 상단에서 드러나지 않고 동시에 중앙에서 확장되는 것처럼 보이게 만들고 싶습니다.

<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

미스터 맨샘

# 1 – 클립 경로 사용

호환성 : Edge를 제외한 모든 최신 브라우저. IE10 / 11 및 Edge는 사용하여 제한된 지원 url()만 제공 합니다.

클립 경로가있는 예

이미지를 자르려면 clip-path: inset(). 이 예에서는 호버시 0으로 축소되는 120 픽셀 상자가 있습니다.

.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 사용

단색 배경색으로 작업하는 경우 간단한 방법은 삽입 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사