title: Change Image on mouse hover and mouse out in CSS
body: <p>I use below mention code to produce a CSS transition effect.
  A div shows first image (i.e. 1.jpg), and upon mouse-hover the second image (2.jpg) is appear through CSS transition and when mouse-out the first image is back to display. </p>
  
  <p>I need a third image on mouse-out so kindly help me how i do this through CSS.<br>
  My coding is as under:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }   
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="mainimg"&gt;
  
  &lt;div class="img2"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>