Menu que amumenta com hover

[TurboReemix 0]

E o seguinte quero fazer que quando o usuario passe o mouse por cima da box ela abra um fundo abaixo com informações sobre o serviço no caso nome e descrição segue o codigo:

HTML:

	<div class="container" id="services">
		<div class="content">
			<div class="heading">
				<h2>
					<span></span>
					<a href="">Nossos Serviços</a>
				</h2>
			</div>
		</div>
		<div class="content" id="services__itens">
			<div class="services__item show"><img src="imagens/tc.jpg" class="img-responsive" alt=""></div>
			<div class="services__item show"><img src="imagens/tc1.jpg" class="img-responsive" alt=""></div>
			<div class="services__item show"><img src="" alt=""></div>
			<div class="services__item show"><img src="" alt=""></div>
                        <div class="services__item hidden"><h2>Serviço 1<h2></div>
		</div>
	</div>

SCSS:

#services{
	#services__itens{
		.services__item{
			@include make-xs-column(12);
			@include make-sm-column(6);
			@include make-md-column(3);

			min-height: 300px;
			margin-bottom: 30px;
			background: #CCC;
			background-clip: content-box;
		}
	}
}

JS:

$(document).ready(function(){
	$(".hidden").hide();
	$(".show").hover(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false;
	});
});

[leonardo de andrade baessa 16]

não entendi. seria uma tooltip?

[L. Henrique 179]

TurboReemix, você pode fazer isso de várias maneiras. Pode fazer da simples (usando um display: none e um hover com display: block) ou brincar com os seletores :before e :after.

Vamos ao simples pra você entender como isso vai funcionar da maneira mais tosca:
HTML:

<div class="conjunto">
    <div class="box">Título</div>
    <div class="conteudo">Lorem ipsum set dolor sit amet</div>
</div>

CSS:

/* 'Função' */
.conteudo{
    display: none;
}
.conjunto:hover > .conteudo{
    display: block;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Estilo */
.conjunto{
    background: #2196F3;
    width: 200px;
    padding: 10px;
    color: #FFF;
}
.box{
    cursor: pointer;
}

Bem simples até aqui. O conteúdo que ficará dentro do seu box ficou com display: none e após um hover na div conjunto ele torna a sua box com display: block.
Se quiser ver isso funcionando, segue aqui a DEMO.

 

------------------------------------------------------------------------------------------------------------------------------------

Você pode fazer o mesmo efeito acima usando um seletor :after ou :before. Segue os exemplos abaixo.
HTML:

<div class="conjunto">
    <div class="box">Título</div>
</div>

CSS:

/* Estilo & Função */
.conjunto{
    background: #2196F3;
    width: 200px;
    padding: 10px;
    color: #FFF;
}
.box{
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.box::after{
    content: "";
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   transition: all 0.2s ease; 
}

.box:hover::after{
    content: "Esse é o seu texto a ser visualizado no hover.";
    display: block;
}

Não tem muita diferença. O máximo que eu fiz foi remover a questão do display (que até então, os seletores são mais 'limpos' de serem trabalhados) e joguei o conteúdo pra dentro do CSS (Isso também inviabiliza, caso a pessoa queira alterar só no HTML).
Se quiser ver isso funcionando, segue aqui a DEMO.

 

------------------------------------------------------------------------------------------------------------------------------------

 

Essa é uma última maneira utilizando um span dentro de uma div, e nele adicionei um transition pra ficar mais apresentável.
HTML:

<div class="box box-style">
    Título
    <span>Aqui vai o seu conteúdo a ser exibido no hover</span>
</div>

CSS:

.box{
    position: relative;
    color: #E91E63;
    cursor: pointer;
    font-size: 2em;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.box-style span{
    display: block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
    .box-style:hover span{
        opacity: 1;
    }

Só tome um pouco de cuidado quando for utilizar de um background, já que como ele está visível e somente o texto tem sua opacidade pra 0, o background vai aparecer independente se há texto ou não.
Se quiser ver isso funcionando, segue aqui a DEMO.

Espero ter ajudado e qualquer coisa, só repostar.