Skip to main content
tags editadas
Link
Fernando Leal
  • 10mil
  • 5
  • 44
  • 93
formatado e adicionado códigos no snippet
Fonte Link
Fernando Leal
  • 10mil
  • 5
  • 44
  • 93

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/ }

 

boa tarde, Alguém poderia me tirar uma dúvida,

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 portifolios 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 ajduar, 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/
}

.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/ }

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>
 

Fonte Link

Alterar tamanho de imagem e box com %, não está funcionando

boa tarde, Alguém poderia me tirar uma dúvida,

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 portifolios 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 ajduar, 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/
}

.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/ }