Skip to main content

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

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') }
);
#hoverarea {
  background-color:red;
  width: 100px;
  height: 100px;
}

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

#machine.show {
  opacity: 1;
}
<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>