Mouse Hover Image Change

index.html

<div class="box-wrap">
    <div class="box">
        <div class="img">
            <img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg09.png" alt="hover effect">
						<img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg08.png" alt="hover effect">
        </div>
        <div class="info">
            <h3>타이틀</h3>
            <p>이미지 설명 부분입니다.</p>
        </div>
    </div>
</div>

mouse-hover-image-change.markdown

Mouse Hover Image Change

A Pen by Webstoryboy on CodePen.

License.

script.js

//이미지에 마우스를 오버 했을 때(mouseover)
//이미지에 마우스를 아웃했을 때(mouseout)

//$(".box").on("mouseover",function(){}).on("mouseout",function(){});
$(".box").on({
	mouseover:function(){
		$(this).find("img:nth-child(1)").stop().animate({opacity:0},600);
		$(this).find("img:nth-child(2)").stop().animate({opacity:1},600);
	}, mouseout:function(){
		$(this).find("img:nth-child(1)").stop().animate({opacity:1},600);
		$(this).find("img:nth-child(2)").stop().animate({opacity:0},600);
	} 
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

body {background-color: #1a237e;}

.box-wrap {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box { 
    background: #000;
    position: relative;
    width: 400px; height: 300px;
    overflow: hidden;
    cursor: pointer;
    border: 7px solid #283593;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.box img {
    width: 100%; display: block;
}
.box img:nth-child(1) {
	position: absolute;
}
.box img:nth-child(2) {
	opacity: 0;
}