html - Change Image on mouse hover and mouse out in CSS -

i use below mention code produce css transition effect. div shows first image (i.e. 1.jpg), , upon mouse-hover second image (2.jpg) appear through css transition , when mouse-out first image display.

i need third image on mouse-out kindly me how through css.
coding under:

.mainimg {     background-image:url(1.jpg);     height: 300px;     width: 300px;     transition: 1s; } .img2 {     background-image:url(2.jpg);     background-size:500px 500px;     width:0px;     height:300px;     transition:1s } .mainimg:hover .img2 {     width:300px;     transition:1s; }    

<div class="mainimg">  <div class="img2"></div>  </div> 

try out: use same div containing image

<div class="mainimg"> 

and use css hover change image background

.mainimg {   background-image:url(1.jpg);   height: 300px;   width: 300px;   transition: 1s; } .mainimg:hover {   background-image:url(2.jpg);   transition: 1s; }