boa tarde, Alguém poderia me tirar uma dúvida,
Tenho um layout, onde tenho uma divdiv
com uma imagem, e uma classclass
com um box por cima dessa imagem, do mesmo tamanho dessa imagem, e aplico um transitiontransition
em cima desse box para revela-lo quando posiciono o mouse por cima dele, e um link nesse box, muito comum em portifoliosportfólios por exemplo.
Gostaria de usar % no Width e Height, porém não estou conseguindo, se deixo sem o heightheight
, ou com o height: auto;height: auto;
ele para de funcionar o transitiontransition
.
Se alguém puder me ajduarajudar, desde já agradeço.
Segue o trecho do código html e css.
HTML
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/
}
#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>
.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/
}