Отобразить скрытый div при наведении
 

Всем привет! Есть такой код

<div class="services_description">
	<img class="swing" src="images/1.png" alt="" />
	<div class="inblock">
		Информация
	</div>
</div>

Блок inblock скрытый

Как сделать чтобы при наведении на блок с классом services_description блок inblock отображался и так чтобы он был такого же размера как картинка (картинка может менять размер при разных разрешениях).

Вангую что тут надо написать некий js-код.
Но вполне можно справиться и одним css.

Можете подсказать пример простой?

Я конечно не эксперт, но без JS как то не получилось это реализовать)))

HTML:

<div class="services_description" onmouseover="ShowDiv();" onmouseout="HideDiv();">
<img class="swing" src="images/1.jpg" alt="" />
<div class="inblock">
Информация
</div>

CSS:

.services_description { width: 250px; height: 250px; }
  .swing { border: 1px solid; width:250px; height:250px; }
  .inblock { border: 1px solid;}

JS:

function ShowDiv() {
  document.getElementsByClassName('inblock')[0].style.height  = document.getElementsByClassName('swing')[0].clientHeight+"px";
  document.getElementsByClassName('inblock')[0].style.width  = document.getElementsByClassName('swing')[0].clientWidth+"px";
  document.getElementsByClassName('inblock')[0].style.display ="";
}
function HideDiv() {
  document.getElementsByClassName('inblock')[0].style.display = "none";
}