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.
var
hovearea = document.getElementById('hoverarea'), // Div
machine = document.getElementById('machine'); // Img
/** Agrego y Quito la clase 'show' */
hovearea.addEventListener('mouseenter', function(){
machine.classList.add('show');
/** IE Support */
//machine.className += ' show';
*/
});
hovearea.addEventListener('mouseleave', function(){
machine.classList.remove('show');
/** IE Support */
//machine.className = machine.className.replace(/\bshow\b/, '');
*/
});
#hoverarea {
background-color:red;
width: 100px;
height: 100px;
}
#machine {
opacity: 0;
transition: opacity 1s;
}
#machine.show {
opacity: 1;
}
<div id="hoverarea">
</div>
<div id="machine">
<img src="http://opensourceecology.org/w/images/3/3a/Metal_Roller.png">
</div>