como trocar a imagem ao passar com o mouse

 

Css

.img-box img.img-hover {

    display: none;

    height: 87px;

    width: 169px;

  }

  .img-box:hover img.img-default {

    display: none;

 

  }

  .img-box:hover img.img-hover {

    display: inherit;

  }

html

<div class="img-box">

              <img class="img-default" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhieoNU65p6Vt07_Zbkz4BI-g-xw_sFZx4a5NzM7KbrCHRqOpoyKUIiDw3lBBut9CeldXDgPQraIcNsTT_o_dAHfk0uymGIiHrZzphZ0Ug6O_b5sTnx6zFapt85FfxhH2FLUvB0mAtV5NRBArVRzd5sWDbgv-Y717pRuHey_yaXyT4mDjwhrGnNaaQYw/s169/1.png" />

              <img class="img-hover" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7w9rapMVeTnLcuX9E5M7w7lWg0uu76X5Z0KmJov7_ODGqTYpIHGnR7YXL2mWjHjrSs-hEZhjtUujUnnMSxRXxGKEk36jvTbOgigPFp347xbdcrJUK0vkmybbwzc6Y9uVh45w2F3LXgwSsJdwRvIccMut1WyEdltG61BFfP7RiOYve4Plfqtobg_nnTk/s704/mavt2.png" />

              </div>