3

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>

2
  • Tentei formatar seu código html e css, 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. Commented 13/02/2015 às 18:27
  • blza, vou fazer alguns testes e se não conseguir volto com essa alteração.
    – Juliocesar
    Commented 13/02/2015 às 20:24

2 Respostas 2

1

A princípio você está fazendo uso errado das propriedades de posicionamento, digo isto me baseando no resultado que está buscando.

Se precisa que os elementos internos se ajustem em relação ao div pai proclinica_projetos, este precisaria ter posição relativa ao invés de absoluta. Nesse caso, sendo relativa, utilizar width:100% e height:100% teria o resultado esperado (desde que o elemento pai tenha a largura e altura definidas).


Uma forma, talvez um pouco melhor seja posicionar de forma absoluta os elementos filhos.

.filho {
    position: absolute;
    left: 0; right: 0; /* "100%" de largura */
    bottom: 0; top: 0  /* "100%" de altura  */
}

Eis um exemplo:

.pai {
    position: relative;
    height: 300px;
    width: 300px
}

/**
  Ocupando toda a área do div pai */
.filho {
    position: absolute;
    left: 0; right: 0;
    bottom: 0; top: 0
}

.atras {
    background: url(https://i.sstatic.net/jmqkH.jpg);
    -webkit-background-size: cover;
            background-size: cover
}

.frente {
    -webkit-transition: all 400ms ease-in;
            transition: all 400ms ease-in;
    background: #000;
    color: #fff
}

.frente:hover {
    background: transparent
}
<div class='pai'>
    <div class='filho atras'></div>
    <div class='filho frente'>HOVER ME</div>
</div>


Adaptando para o seu caso...

Como precisa que esse conteúdo seja "clicável", utilizando a técnica anterior basta tornar o a um elemento de bloco:

.box {
    position: relative;
    overflow: hidden;
    height: 300px;
    width: 300px
}

.box a, .box img {
    position: absolute;
    left: 0; right: 0;
    bottom: 0; top: 0
}

.box img {
    height: 100%
}

.box a {
    -webkit-transition: all 400ms ease-in;
            transition: all 400ms ease-in;
    background: #000;
    color: #fff
}

.box a:hover {
    background: transparent
}
<div class='box'>
    <img alt='' src='https://i.sstatic.net/jmqkH.jpg'/>
    <a href='http://pt.stackoverflow.com'>Hover/Click me</a>
</div>

Bônus:

Sempre utilize box-sizing:border-box em seu CSS para evitar surpresas com relação ao tamanho dos elementos, este artigo explica melhor o porque com alguns exemplos.


OBS: Em ambos os exemplos utilizei a propriedade transition com suporte somente a navegadores webkit e o Firefox para não tornar o código extenso. No entanto, na hora de colocar no seu site, não esqueça de dar suporte ao Internet Explorer e Opera.

3
  • valeu, muito obrigado, vou fazer os testes aqui e volto pra dar retorno.
    – Juliocesar
    Commented 13/02/2015 às 20:23
  • @Juliocesar deu certo? Commented 16/02/2015 às 23:01
  • Olá @Renan, desculpa a demora em responder. Então deu mais ou menos certo. Consegui aplicar seu exemplo no elemento que fica à direta da página, esse que mostrei, mas em outros que ficam à esquerda e abaixo, não consegui mesmo. Tentei alterar os left, right, top e bottom e nada.
    – Juliocesar
    Commented 19/02/2015 às 0:40
0

eu entendi o que você estava tentando fazer, apesar da pergunta ter ficado confusa, poderia ter dito apenas que precisava colocar um efeito ao passar o mouse.

de toda forma, não precisava fazer assim, você não colocou nada dentro desse "box", só serviu para ocupar espaço, faça desta forma que dará certo:

.image{
    -webkit-filter:grayscale(100%);
}
.image:hover{
    -webkit-filter:grayscale(0%);
    transition: 1s;
}


<div id="proclinica_projetos">
    <a href="proclinica.html" class="box_transicao_proclinica"> 
      <img src="imagens/home/proclinica_projetos.png" class="image">
    </a>
</div>

se você busca algo mais sofisticado, como mostrar um texto ao passar o mouse na imagem, faça assim:

<style>
    .imagem {
      position: relative;
    }
    .capa {
      display: none;
    }

    .imagem:hover .capa {
      display: block;
    }

    .capa {
      background: rgba(0, 0, 0, 0.4);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
</style>

    <div class="imagem">
     <img src="https://www.w3schools.com/howto/img_fjords.jpg" >
     <div class="capa">
       <h1>Título</h1>
       <p>Aqui vem o texto</p>
     </div>
    </div> 

Aqui tem um exemplo para wordpress: https://www.anicasagrande.com.br/detalhes-que-aparecem-quando-passa-o-mouse-sobre-imagem/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .