Tenho um layout, onde tenho uma div
com uma imagem, e uma class
com um box por cima dessa imagem, do mesmo tamanho dessa imagem, e aplico um transition
em cima desse box para revela-lo quando posiciono o mouse por cima dele, e um link nesse box, muito comum em portfólios por exemplo.
Gostaria de usar % no Width e Height, porém não estou conseguindo, se deixo sem o height
, ou com o height: auto;
ele para de funcionar o transition
.
Se alguém puder me ajudar, desde já agradeço.
Segue o trecho do código html e css:
#proclinica_projetos {
width: 960px;
left: 0%;
top: 50px;
position: absolute;
}
.box_transicao_proclinica {
background-color: rgba(0, 0, 0, 0);
width: 960px;
height: 960px;
top: 50px;
left: 0%;
position: absolute;
z-index: 3;
-webkit-transition: 0.5s;
/*propriedade para o google chrome*/
-moz-transition: 0.5s;
/*propriedade para o firefox*/
-o-transition: 0.5s;
/*propriedade para o opera*/
transition: 0.5s;
/*propriedade para IE*/
}
.box_transicao_proclinica:hover {
background-color: rgba(0, 0, 0, 1);
width: 960px;
height: 960px;
top: 50px;
left: 0%;
position: absolute;
z-index: 3;
-webkit-transition: 0.5s;
/*propriedade para o google chrome*/
-moz-transition: 0.5s;
/*propriedade para o firefox*/
-o-transition: 0.5s;
/*propriedade para o opera*/
transition: 0.5s;
/*propriedade para IE*/
}
<div id="proclinica_projetos">
<img src="imagens/home/proclinica_projetos.png" />
<div>
<a href="proclinica.html" class="box_transicao_proclinica"></a>
</div>
</div>
html
ecss
, no snippet executável aqui do SO, mas não ficou como você descreveu, acompanhe o mesmo e tente fazer os ajustes, para deixa-lo similar a sua ambiente, para que possamos entender melhor seu problema e possivelmente lhe ajudar. Bem Vindo ao SOpt.