아래 사진에 마우스를 올려보기 바란다.
<css로 이미지 전환> <html로 이미지 전환>
html만으로는 여라가지 한계로 인해 투박하게 할 수 밖에 없지만 css로 효과를 넣는 다면 자연스런 전환이 될 수 있다.
소스는 아래와 같다.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#imgDiv {
width: 160px;
height: 210px;
position: absolute;
border: 2px solid lightseagreen;
}
#imgDiv2 {
width: 160px;
height: 210px;
position: relative;
border: 2px solid lightseagreen;
left: 200px;
}
#imgDiv img { // 두개의 이미지 위치를 똑같이 맞춰줘야 합니다.
width: 150px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -100px;
}
#imgDiv2 img {
width: 150px;
height: 200px;
position: relative;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -100px;
}
#imgDiv > #funny { // 여기부터
opacity: 0;
transition: opacity 1s
}
#imgDiv:hover > #funny {
opacity: 1;
} //여기까지가 핵심입니다.
</style>
</head>
<body>
<div id="imgDiv">
<img id="serious" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg">
<img id="funny" src="http://image.hnol.net/c/2011-02/11/13/201102111316417591-167450.jpg">
</div>
<div id="imgDiv2">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg"
onmouseover="this.src='http://image.hnol.net/c/2011-02/11/13/201102111316417591-167450.jpg'"
onmouseout="this.src='https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg'"
border="0">
</div>
</body>
html로 이미지 전환 하는 소스까지 포함해서 올렸다.
위 소스 내용처럼 opacity와 transition 속성을 사용하여 이미지를 부드럽게 처리했다. 속성값을 보면 대충 이해가겠지만 1초동안 opacity값이 0에 해당되는 선택자를 마우스 오버시 1초동안 서서히 나타나게 하라는 내용이다.
또 div안에 중앙정렬하기 위해 position의 값이 absolute일 때 div 안에 중앙 정렬하는 공식을 적용하였다.
left와 top에 50%를 주고 width와 height의 절반 값을 margin-left와 margin-top에 넣으면 div 내에서 중앙정렬 된다.
다음 번에는 JAVASCRIPT를 활용해서 좀더 발전된 화면전환 소스를 공개하겠다.
'개 발코딩' 카테고리의 다른 글
| [PHP] mail() 함수로 메일 보내기 (0) | 2016.06.14 |
|---|---|
| [html] IE 호환성보기 설정 무시하기 (1) | 2016.06.13 |
| [jquery] delay 없이 서서히 움직이는 가로 롤링 배너 (20) | 2016.06.07 |
| [java] close() 와 disconnect()의 차이 (0) | 2016.04.21 |
| [JAVA] getWriter() has already been called for this response 원인 (0) | 2016.04.20 |
