24'C 구름 많음
서울 강남구
html만으로는 여라가지 한계로 인해 투박하게 할 수 밖에 없지만 css로 효과를 넣는 다면 자연스런 전환이 될 수 있다.
<style>
#imgDiv {
width: 160px;
height: 210px;
position: absolute;
border: 2px solid lightseagreen;
}
#imgDiv img {
width: 150px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -100px;
}
#imgDiv > #funny {
opacity: 0;
transition: opacity 1s
}
#imgDiv:hover > #funny {
opacity: 1;
}
#imgDiv2 {
width: 160px;
height: 210px;
position: relative;
border: 2px solid lightseagreen;
left: 200px;
}
#imgDiv2 img {
width: 150px;
height: 200px;
position: relative;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -100px;
}
</style>
<div id="imgDiv">
<img id="serious" src="/img/1-min.jpg">
<img id="funny" src="/img/2-min.jpg">
</div>
<div id="imgDiv2">
<img src="/img/1-min.jpg"
onmouseover="this.src='/img/2-min.jpg'"
onmouseout="this.src='/img/1-min.jpg'"
border="0">
</div>
html로 이미지 전환 하는 소스까지 포함해서 올렸다.
위 소스 내용처럼 opacity와 transition 속성을 사용하여 이미지를 부드럽게 처리했다. 속성값을 보면 대충 이해가겠지만 1초동안 opacity값이 0에 해당되는 선택자를 마우스 오버시 1초동안 서서히 나타나게 하라는 내용이다.
또 div안에 중앙정렬하기 위해 position의 값이 absolute일 때 div 안에 중앙 정렬하는 공식을 적용하였다.
left와 top에 50%를 주고 width와 height의 절반 값을 margin-left와 margin-top에 넣으면 div 내에서 중앙정렬 된다.