Change image size and box with %, not working

Question

I have a layout, where I have a div with an image, and a class with a box over that image, the same size as that image, and I apply a transition on top of this box to reveal it when positioning the mouse over it, and a link in this box, very common in portfolios for example.

I would like to use % in Width and Height, but I’m not succeeding, if I leave without the height, or with the height: auto; it stops working the transition.

If anyone can help me, I’d appreciate it.

Follow the html and css code snippet:

#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>

Answer 1

At first you are making wrong use of the positioning properties, I say this based on the result you are seeking.

Internal elements need to adjust to the div father proclinica_projetos, it would need to have relative rather than absolute position. In this case, being relative, use width:100% and height:100% would have the expected result (provided that the parent element has the defined width and height).

---

One way, perhaps a little better is to position the child elements in an absolute way.

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

Here’s an example:

.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(http://i.stack.imgur.com/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>

---

Adapting to your case...

As you need this content to be "clickable", using the previous technique just make the a a block element:

.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='http://i.stack.imgur.com/jmqkH.jpg'/>
    <a href='http://answall.com'>Hover/Click me</a>
</div>

Bonus:

Always use box-sizing:border-box in your CSS to avoid surprises regarding the size of the elements, this article explains better why with some examples.

---

^{OBS: In both examples I used the property transition with browser only support Webkit and the Firefox not to make the code lengthy. However, when placing on your site, do not forget to support Internet Explorer and Opera.}

Answer 2

I understood what you were trying to do, even though the question got confused, I could have just said I needed to put an effect while passing the mouse.

Anyway, you didn’t have to do it like this, you didn’t put anything inside this "box", just served to occupy space, do it like this that will work:

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

if you are looking for something more sophisticated, such as showing a text by hovering the mouse over the image, do so:

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

Here is an example for wordpress: https://www.anicasagrande.com.br/detalhes-que-aparecem-quando-passa-o-mouse-sobre-imagem/