Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
});
});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;
} 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;
} 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.
não entendi. seria uma tooltip?