Skip to main content
4 de 5
se eliminaron 28 caracteres en el cuerpo

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>