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>