Как сделать при:hover на одном div второй плавно появлялся справа?

Question

[Максим Киктев]

html код

<div  id="portrait-wrap"></div>
<div  id="portrait-wrap2"><img src="../img/5.jpg"  /></div>

css

#portrait-wrap {
position: relative;
top: 500px;
width: 90px;
height: 90px;
border-radius: 10px;
background: #000;
}
#portrait-wrap2 {
  text-align: center;
  display: none; 
}
#portrait-wrap:hover + #portrait-wrap2 {
    display: block; 
}

сайт на котором код
сайт пример как должно появляться при наведении на героев

Answer 1

[y0u]

Вот пример. Осталось только немного допилить.

Comments

[Максим Киктев]

в моем случае это не работает

[y0u]

Максим Киктев: Почему нет, можно узнать?

[y0u]

Максим Киктев: jsfiddle.net/8Lpd302j

[Алексей Зорин]

y0u: у вас там div id="portrait-wrap" в 10-ти местах

[y0u]

Алексей Зорин: продублировал, чтобы было видно, как работает.

Answer 2

[Евгений Кузнецов]

В данном случае можно так

Answer 3

[Алексей Зорин]

#portrait-wrap {
position: relative;
top: 500px;
width: 90px;
height: 90px;
border-radius: 10px;
background: #000;
}
#portrait-wrap2 {
  text-align: center;
  

}
#portrait-wrap2 {
  display: none;
	opacity: 0;
}

немножко измените CSS

Подключите более свежий jQuery, вы только начинаете писать сайт

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Перед закрывающим добавьте код

<script type="text/javascript">
	var temp = 1;
	$("#portrait-wrap").mouseenter(function(){
		if(temp == 1)
		{
			temp = 0;
			$("#portrait-wrap2").css({display: "block"});
			$("#portrait-wrap2").animate({opacity: 1}, 1000);
		}
	});
</script>

Comments

[Алексей Зорин]

Вот простой пример jsfiddle.net/njqpm2rc
На вашем jQuery тоже можно сделать, просто мне удобней на последнем. Если что, переделать не составит для вас труда

[Алексей Зорин]

Можно и на css как написал Евгений Кузнецов