Puedes usar `Javascript`. Aplicando los eventos `mouseenter` y `mouseleave` 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 = document.getElementById('hoverarea'), // Div
    machine = document.getElementById('machine'); // Img

    /** Agrego y Quito la clase 'show' */
    hovearea.addEventListener('mouseenter', function(){
    	machine.className += ' show';
    });

    hovearea.addEventListener('mouseleave', function(){
    	machine.className = machine.className.replace(/\bshow\b/, '');
    });

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

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

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

    #machine.show {
      opacity: 1;
    }

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

    <div id="hoverarea">

    </div>


    <div id="machine">

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

    </div>

<!-- end snippet -->