html – Change image size and box with %, it's 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 this image, and I transition over that box to reveal it when I hover 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 am not able to, if I leave without height , or with height: auto; it stops the transition from working.

If anyone can help me, I appreciate it.

Here is the snippet of the html and css code:

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

At first you are misusing the placement properties, I say this based on the result you are looking for.

If you need the inner elements to fit relative to the proclinica_projetos parent div , it would need to be relative rather than absolute in position. In this case, being relative, using width:100% and height:100% would have the expected result (provided the parent element has the defined width and height).

One way, perhaps a little better, is to absolutely position the child elements.

.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://pt.stackoverflow.com'>Hover/Click me</a>
</div>

Bonus:

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

^{NOTE: In both examples I used the transition property with support only for webkit browsers and Firefox so as not to make the code lengthy. However, when putting it on your site, don't forget to support Internet Explorer and Opera.}