테스트 사이트 - 개발 중인 베타 버전입니다

마우스오버 확대되는 레이아웃 소스 채택완료

승승이 4년 전 조회 1,846

소스를 찾고 있습니다.

가끔 보던 소스인데 막상 찾으려고 하니, 아무리 구글링을 해도 힘드네요;;

아래와 같이 처음에는 첫번째 레이아웃만 큰상태에서

다른 레이아웃에 마우스 오버하면 해당 레이아웃이 커지고 컸던 레이아웃은 작아지고...

이런 소스가 있거나, 알고 계신분 계실까요..

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트

CSS 마우스 오버 효과라면... 

 

예를 들면 코드를 짜둘게요.

HTML, PHP </span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><span style="white-space: pre-wrap;"><div class="sample_image"></span><img src="이미지"> </div></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;">

 

CSS</span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>.sample_image  img {</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-webkit-transform:scale(</code><code>1</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-moz-transform:scale(</code><code>1</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-ms-transform:scale(</code><code>1</code><code>); </code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-o-transform:scale(</code><code>1</code><code>);  </code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>transform:scale(</code><code>1</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-webkit-transition:.</code><code>3</code><code>s;</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-moz-transition:.</code><code>3</code><code>s;</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-ms-transition:.</code><code>3</code><code>s;</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-o-transition:.</code><code>3</code><code>s;</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>transition:.</code><code>3</code><code>s;</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>}</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>.sample_image:hover img {</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-webkit-transform:scale(</code><code>1.2</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-moz-transform:scale(</code><code>1.2</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-ms-transform:scale(</code><code>1.2</code><code>);   </code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>-o-transform:scale(</code><code>1.2</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>    </code><code>transform:scale(</code><code>1.2</code><code>);</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;"><code>}</code></span></span></p>

<p><span style="font-family:맑은 고딕;"><span style="font-size:10pt;">

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

4년 전
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인