Как сделать появление одного элемента при наведении на другой элемент?
Да, просто поменяйте их местами.img:hover + .hover-info { display: block;}
более универсальное решение хотя и более заморочистое
html:<div>
  <div class="block1"></div>
</div>
<div>
  <div class="block2"></div>
</div>
css:.block1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.block2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  left: 200px;
  top: 10px;
}

.block2.when_block1_hover {
  background-color: #333;
}
js + jQuery:$(function(){
  $('.block1').hover(function(){
    $('.block2').addClass('when_block1_hover');
  }, function(){
    $('.block2').removeClass('when_block1_hover');
  })
});тоже самое на codepen