Fórum Aplicar efeito em diversas divs. #507132
13/01/2015
0
E aí pessoal, boa tarde!
Estou com um problema aqui, preciso aplicar um efeito em varias divs, fazer o efeito eu ja consegui. Agora meu problema é usar isso nas outras, vou colocar aqui o código do efeito!
html:
<figure class="foto-inicio">
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
css:
figure img{
position: relative;
width: 500px;
height:280px;
}
figure figcaption{
position:absolute;
color:#000000;
top:4%;
background-color: rgba(0,0,0,0.4);
width: 500px;
height:285px;
padding:10px;
box-sizing: border-box;
opacity:0;
transition: opacity 1s;
text-align: center;
}
figure:hover figcaption{
opacity:1;
}
o problema é que quando adiciono outra foto, obviamente o evento buga.
Gostaria de alguma ajuda pra solucionar esse problema :(
Estou com um problema aqui, preciso aplicar um efeito em varias divs, fazer o efeito eu ja consegui. Agora meu problema é usar isso nas outras, vou colocar aqui o código do efeito!
html:
<figure class="foto-inicio">
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
css:
figure img{
position: relative;
width: 500px;
height:280px;
}
figure figcaption{
position:absolute;
color:#000000;
top:4%;
background-color: rgba(0,0,0,0.4);
width: 500px;
height:285px;
padding:10px;
box-sizing: border-box;
opacity:0;
transition: opacity 1s;
text-align: center;
}
figure:hover figcaption{
opacity:1;
}
o problema é que quando adiciono outra foto, obviamente o evento buga.
Gostaria de alguma ajuda pra solucionar esse problema :(
Komander
Curtir tópico
+ 0
Responder
Post mais votado
02/02/2015
Certo Komander, seu código está correto então. O problema é que o seu position absolute fez com que as div se sobrepusessem dando a impressão de que o efeito não funciona.
Altere as seguintes linhas e teste para ver a mudança.
Neste bloco:
figure figcaption{
Altere as propriedades abaixo para os novos valores:
position:relative;
bottom: 40px; /*Coloquei o bottom no lugar do top*/
height:40px;
O position absolute faz que o elemento assuma uma posição absoluta perante a página, então se você aplicar o mesmo efeito nas divs elas irão se sobrepor.
O top que eu coloquei como bottom ai é porque acredito que você queira deixar a div como legenda... dai é melhor você alinha de baixo pra cima que estará mais próximo.
E por fim o height, estava bem grande para o texto, só diminui para lhe mostrar melhor o efeito funcionando.
Altere as seguintes linhas e teste para ver a mudança.
Neste bloco:
figure figcaption{
Altere as propriedades abaixo para os novos valores:
position:relative;
bottom: 40px; /*Coloquei o bottom no lugar do top*/
height:40px;
O position absolute faz que o elemento assuma uma posição absoluta perante a página, então se você aplicar o mesmo efeito nas divs elas irão se sobrepor.
O top que eu coloquei como bottom ai é porque acredito que você queira deixar a div como legenda... dai é melhor você alinha de baixo pra cima que estará mais próximo.
E por fim o height, estava bem grande para o texto, só diminui para lhe mostrar melhor o efeito funcionando.
Gisele Fagundes
Responder
Gostei + 1
Mais Posts
13/01/2015
Gisele Fagundes
Komander, você adiciona outra foto em baixo da tag img assim:
<figure class="foto-inicio">
<img src="caminho-img" >
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
Ou duplica o codigo?
<figure class="foto-inicio">
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
<figure class="foto-inicio">
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
<figure class="foto-inicio">
<img src="caminho-img" >
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
Ou duplica o codigo?
<figure class="foto-inicio">
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
<figure class="foto-inicio">
<img src="caminho-img" >
<figcaption>Galeria 1</figcaption>
</figure>
Responder
Gostei + 0
13/01/2015
Komander
Opa, obrigado pela resposta!
Eu duplico o codigo, pois seria uma nova "galeria"
Eu duplico o codigo, pois seria uma nova "galeria"
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)