이미지 마우스 올리면 변하게 하고싶어요
본문
답변 1
<head>
<meta charset="UTF-8">
<title>Title</title>
<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;
}
</style>
</head>
<body>
<div id="imgDiv">
<img id="serious" src="첫번째 이미지주소.jpg"> <!-- 첫출력 이미지 -->
<img id="funny" src="두번째 이미지주소.jpg"><!-- 마우스 오버시 변경 이미지 -->
</div>
</body>
</html>
이외에도, 자바스크립트나 jquery등 방법은 많으니,
구글에서 검색해 보시면, 많이 나올겁니다.
(검색어 : 마우스 오버 이미지)