Podes Usar jQuery. Haciendo hover sobre el DIV agregas o quitas una clase a la imagen. Despues desde CSS manejas las transiciones que quieras. 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var 
    $hovearea = $('#hoverarea'), // Div
    $machine = $('#machine'); // Img

    /** Agrego y Quito la clase 'show' */
    $hovearea.hover(
      /* Mouse Enter */
      function(){ $machine.addClass('show') },
      
      /* Mouse Leave */
      function(){ $machine.removeClass('show') }
    );

<!-- language: lang-css -->

    #hoverarea {
      background-color:red;
      width: 100px;
      height: 100px;
    }

    #machine {  
      opacity: 0;
      transition: opacity 1s;
    }

    #machine.show {
      opacity: 1;
    }





<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="hoverarea">

    </div>


    <div id="machine">

      <img src="http://opensourceecology.org/w/images/3/3a/Metal_Roller.png">

    </div>

<!-- end snippet -->