برای ایجاد کردن این تغییر موس که وقتی روی عکسی قرار می گیرد عوض شود، ابتدا باید دو عکس را با html قرار داده و position آنها که داخل css تعریف شده است را تغییر می دهیم.و طبق دستور کدهای زیر استایل را هم تعریف می کنیم:
ساختار (html)
<body>
<figure class="swap-on-hover">
<!-- عکس رویی که اول نمایش داده می شود. -->
<img class="swap-on-hover__front-image" src="tiger.jpg"/>
<!-- عکس زیرین که با بردن موس روی آن نمایش داده می شود.-->
<img class="swap-on-hover__back-image" src="dog.jpg"/>
</figure>
استایل (css)
body {
background-color: #820880;
margin: 50px auto;
box-sizing: border-box;
}
.swap-on-hover {
position: relative;
margin: 0 auto;
max-width: 400px;
}
.swap-on-hover img {
position: absolute;
top:0;
left:0;
overflow: hidden;
width: 400px;
height: 400px;
}
.swap-on-hover .swap-on-hover__front-image {
z-index: 9999;
transition: opacity .5s linear;
cursor: pointer;
}
.swap-on-hover:hover > .swap-on-hover__front-image{
opacity: 0;
}