Animation with height with relative measurements

Question

.item-case {
    position: relative;
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
    margin-right: 15px;
    margin-left: 15px;      
}
.item-case .info {
    min-width: 100%;
    max-width: 100%;
    background-color: #00afb5;    
    padding-top: 7px;    
    position: absolute;
    bottom: 0;
    height: auto;
  transition: height 5s linear;
}
.item-case .info h2{
    margin-top: 0;
    margin-left: 10px;
    margin-right: 10px;
}
.item-case .info p {
    margin-left: 10px;
    margin-right: 10px;
    display: none;    
    visibility: hidden;
      transition: visibility 5s linear;
}
.item-case:hover .info p {
    display: block;
}
.item-case .info h2,
.item-case .info h2 * {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 140%;
    text-align: center;
    color: #fefefe;
}
.item-case .info p,
.item-case .info p * {
    color: #5be8ed;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 90%;
}
.item-case .imagem{
    position: relative;
}
.item-case .imagem .efeito-imagem {
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    position: absolute;
    top:0;
}
.item-case:hover .imagem .efeito-imagem {
    background-color: rgba(62, 62, 62, 0.6);
    transition: background 1000ms linear;
}
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

 <section class="col-md-4 col-sm-4 col-xs-12 item-case">
      <div class="imagem">
          <img src="http://devimg.com/550x330/dogs" class="img-responsive center-block" alt="">
          <div class="efeito-imagem"></div>
      </div><!--imagem-->
      <div class="info">
          <h2>Unimed Alto São Francisco</h2>
          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dolor dinissim, consequat enin sed, convallis massa. Fusce vel nins nibh</p>
      </div><!--info-->
 </section><!--col-md-4 col-sm-4 col-xs-12 item-case-->

In the div "info" I’m trying to put a soft effect on the expansion when the element p gains visibility and block. But I could not obtain the result, only with absolute measures, of heigth:10px to height:50px for example.

Is there any way to do this preferably without using Javascript?

Answer 1

There are simpler and easier ways to create the behavior you are looking for. By far, opting for the element’s change of position is the more suicidal¹ worst.

Change the rule to position:relative may bring you a second headache because of the positioning of the child elements who will also have their positions affected by this change.

_{¹ exaggerates the part.}

---

Following is a proposal to create this smooth transition in the caption, the explanations come right below. View the snippet on "whole page".

/* "reset" */
* {margin:0;padding:0}body{font-family:sans-serif}


figure {
  position: relative;
  overflow: hidden; /* 1 */
  height: 333px;
  width: 500px;
}

img,
figcaption {
  position: absolute;
  left: 0; right: 0; /* "100%" de largura */
}

img {
  top: 0; right: 0; /* "100%" de altura */
}

figcaption {
  bottom: 0;
  background: rgba(52, 73, 94, .8);
  color: #fff;
  
  -webkit-transform: translateY(calc(100% - 35px)); /* 2 */
          transform: translateY(calc(100% - 35px));
  transition: all 250ms ease-in;
}


header {
  height: 35px; /* 3 */
  line-height: 35px;
}

figure:hover figcaption {
  -webkit-transform: translateY(0); /* 4 */
          transform: translateY(0);
}

p { padding: 8px }
header, p { text-align: center }

<figure>
  <img src='http://i.stack.imgur.com/bo6Me.jpg' alt='dogs' />
  <figcaption>
    <header>
      <h3>Você gosta de catchorros?</h3>
    </header>
    <p>rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
    </p>
  </figcaption>
</figure>

The idea is very simple and consists simply in hiding everything that exceeds the limits of the element figure. In this case who will pass (purposely) this limit is the legend - element figcaption.

The explanations (see comments in CSS):

1º we define what was said above, anything that exceeds the limits of figure will be hidden.

Next (2º) comes the magic: We use the property translateY to move the element vertically, we will lower it so that its content exceeds the tag limit figure and be hidden.

For this we use a function present in CSS called calc(), that as the name suggests allows us to perform calculations on the style sheet itself. But where do these come from 100% - 35px? Well, 100% represents the height of our element and the 35 pixels will be what we leave visible (ver 3º). The result of this operation will be how much of the element figcaption that will remain hidden.

The great advantage of using this technique is that even if the content of the paragraph inside the caption increases it will remain hidden while the 35px will be visible.

In the 4º, all we need to do is vertically shift our element figcaption to his true position when there is the event of Hover in the element figure.

Below, I’ll leave the same code without the property overflow:hidden to be easier to visualize what happens:

/* "reset" */
* {margin:0;padding:0}body{font-family:sans-serif}


figure {
  position: relative;
  /*overflow: hidden; /* 1 */
  height: 333px;
  width: 500px;
}

img,
figcaption {
  position: absolute;
  left: 0; right: 0; /* "100%" de largura */
}

img {
  top: 0; right: 0; /* "100%" de altura */
}

figcaption {
  bottom: 0;
  background: rgba(52, 73, 94, .8);
  color: #fff;
  
  -webkit-transform: translateY(calc(100% - 35px)); /* 2 */
          transform: translateY(calc(100% - 35px));
  transition: all 250ms ease-in;
}


header {
  height: 35px; /* 3 */
  line-height: 35px;
}

figure:hover figcaption {
  -webkit-transform: translateY(0); /* 4 */
          transform: translateY(0);
}

p { padding: 8px }
header, p { text-align: center }

<figure>
  <img src='http://i.stack.imgur.com/bo6Me.jpg' alt='dogs' />
  <figcaption>
    <header>
      <h3>Você gosta de catchorros?</h3>
    </header>
    <p>rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
    </p>
  </figcaption>
</figure>

And another example increasing paragraph content in the caption:

/* "reset" */
* {margin:0;padding:0}body{font-family:sans-serif}


figure {
  position: relative;
  overflow: hidden; /* 1 */
  height: 333px;
  width: 500px;
}

img,
figcaption {
  position: absolute;
  left: 0; right: 0; /* "100%" de largura */
}

img {
  top: 0; right: 0; /* "100%" de altura */
}

figcaption {
  bottom: 0;
  background: rgba(52, 73, 94, .8);
  color: #fff;
  
  -webkit-transform: translateY(calc(100% - 35px)); /* 2 */
          transform: translateY(calc(100% - 35px));
  transition: all 250ms ease-in;
}


header {
  height: 35px; /* 3 */
  line-height: 35px;
}

figure:hover figcaption {
  -webkit-transform: translateY(0); /* 4 */
          transform: translateY(0);
}

p { padding: 8px }
header, p { text-align: center }

<figure>
  <img src='http://i.stack.imgur.com/bo6Me.jpg' alt='dogs' />
  <figcaption>
    <header>
      <h3>Você gosta de catchorros?</h3>
    </header>
    <p>
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
      rouf rouf rouf rouf rouf rouf rouf rouf rouf rouf
    </p>
  </figcaption>
</figure>