css 로 마우스 오버 일때의 이미지 확대 효과 예제 html과 css 파일 첨부하였습니다.

css 코드 중에 이미지 위에 마우스를 오버 했을 경우에 주위에 영향은 주지 않고 이미지만 확대되어 보이는 효과에 대한 html과 css 코드 예제입니다. css 코드 중에 scale(1.08); 관련 코드를 유의해서 보시면 됩니다.

[예제 파일 : albumList.html]

<div class="albumList">

<div class="album">

<a href="album?code=1"><span class="cover_image" style="background-image: url('album_cover?code=3')" ;=""></span></a>

<h5>앨범1의 제목</h5>

<p>비디오 갯수1</p>

</div>

<div class="album">

<a href="album?code=2"><span class="cover_image" style="background-image: url('album_cover?code=2')" ;=""></span></a>

<h5>앨범2의 제목</h5>

<p>비디오 갯수2</p>

</div>

<div class="album">

<a href="album?code=3"><span class="cover_image" style="background-image: url('album_cover?code=2')" ;=""></span></a>

<h5>앨범3의 제목</h5>

<p>비디오 갯수3</p>

</div>

</div>

[예제 파일 : albumList.css]

div.album {

position: relative;

display: inline-block;

box-sizing: border-box;

text-align: center;

width: 214px;

}

div.album a {

position: relative;

margin: 0 auto;

box-sizing: border-box;

width: 182px;

display: block;

overflow: visible;

}

div.album span.cover_image {

display: block;

width: 180px;

height: 180px;

box-shadow: 0 1px 6px 1px #ccc, inset 0 1px 2px rgba(255, 255, 255, 0.7);

border: 1px solid #bbb;

background-image: url("img/present.png");

background-size: 180px 180px;

background-repeat: no-repeat;

/* border-radius: 4px; */

-webkit-transition: -webkit-transform 0.28s ease;

-moz-transition: -moz-transform 0.28s ease;

-o-transition: -o-transform 0.28s ease;

transition: transform 0.28s ease;

}

div.album span.cover_image:hover {

background-color: white;

opacity: 1.0;

-webkit-transform: scale(1.08);

-moz-transform: scale(1.08);

-o-transform: scale(1.08);

transform: scale(1.08);

/*

-webkit-animation-name: pop_out, flash;

-webkit-animation-duration: 0.28s;

-moz-animation-name: pop_out, flash;

-moz-animation-duration: 0.28s;

-o-animation-name: pop_out, flash;

-o-animation-duration: 0.28s;

animation-name: pop_out, flash;

animation-duration: 0.28s;

*/

}

div.album span.cover_image:active {

-webkit-transition: -webkit-transform 0.15s ease;

-webkit-transform: scale(1.0);

-moz-transition: -moz-transform 0.15s ease;

-moz-transform: scale(1.0);

-o-transition: -o-transform 0.15s ease;

-o-transform: scale(1.0);

transition: transform 0.15s ease;

transform: scale(1.0);

opacity: 1.0;

}

@-webkit-keyframes pop_out {

from { -webkit-transform: scale(1.0); }

20% { -webkit-transform: scale(0.9); }

to { -webkit-transform: scale(1.08); }

}

@-moz-keyframes pop_out {

from { -moz-transform: scale(1.0); }

20% { -moz-transform: scale(0.9); }

to { -moz-transform: scale(1.08); }

}

@-o-keyframes pop_out {

from { -o-transform: scale(1.0); }

20% { -o-transform: scale(0.9); }

to { -o-transform: scale(1.08); }

}

@keyframes pop_out {

from { transform: scale(1.0); }

20% { transform: scale(0.9); }

to { transform: scale(1.08); }

}

@-webkit-keyframes flash {

from { opacity: 0.4; }

60% { opacity: 0.5; }

to { opacity: 1.0; }

}

@-moz-keyframes flash {

from { opacity: 0.4; }

60% { opacity: 0.5; }

to { opacity: 1.0; }

}

@-o-keyframes flash {

from { opacity: 0.4; }

60% { opacity: 0.5; }

to { opacity: 1.0; }

}

@keyframes flash {

from { opacity: 0.4; }

60% { opacity: 0.5; }

to { opacity: 1.0; }

}

[예제 파일 다운 받으세요.]

albumList.css

albumList.html