Change image size and box with%, not working

Question

Change image size and box with%, not working

Navigation

#1 by (1 votes)

3

I have a layout, where I have a div with an image, and a class with a box above that image, the same size of that image, and I apply a transition on top of this box to reveal it when I position 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 can not, if I leave without height , or with height: auto; it stops working transition .

If someone can help me, thank you in advance.

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>

html css div height porcentagem

asked by anonymous 13.02.2015 / 19:17

1 answer

Change the array keys returned by mysqli_result Develop standard template Razor - ASPNET MVC

score 1 · Answer 1

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

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

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 prior art just make 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 the elements, this article explains better because with some examples .

OBS: In both examples I used the transition property with only webkit browsers and Firefox to not make the code extensive. However, when it comes to your site, do not forget to support Internet Explorer and Opera.