برای ایجاد کردن این تغییر موس که وقتی روی عکسی قرار می گیرد عوض شود، ابتدا باید دو عکس را با 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;
}

خروجی تغییر عکس هنگام رفتن موس روی آن