Animation with height with relative measures

Navigation
1

.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><!--LatestcompiledandminifiedCSS--><linkrel="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><sectionclass="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 div "info" I'm trying to put a soft effect on expansion when the p element gains visibility and block. But I could not get the result, with absolute measures, from heigth:10px to height:50px for example.

Is there any way to do this preferably without the use of JavaScript?

    
asked by anonymous 13.01.2015 / 13:41

1 answer

2

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

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

¹ exaggerations aside.

Here's a proposal to create this smooth transition in the caption, the explanations come right down. View the snippet on "entire 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 simply consists of hiding everything that exceeds the limits of the figure element. In that case, whoever will (purposely) exceed this limit is the caption - element figcaption .

The explanations (see comments in CSS):

1º we define what was said above, everything that goes beyond the limits of figure will be hidden.

Next (% with_%) comes the magic: We use the 2º property to move the element vertically, we will go down it so that its content exceeds the limit of the translateY tag and is hidden.

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

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

In%%, all we need to do is to move vertically our figcaption element to its true position when there is the hover event in the 4º element.

Below, I'll leave the same code without the figcaption property to make it easier to see 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 by increasing the 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>
    
21.04.2015 / 11:51
Width does not increase more than 283px BootStrap Perform schema import by changing grant and synonym