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

Na div "info" estou tentando colocar um efeito suave na expansão quando o elemento p ganha visibilidade e bloco. Porém não consegui obter o resultado, somente com medidas absolutas, de heigth:10px a height:50px por exemplo.

Há alguma forma de se fazer isso preferencialmente sem o uso de JavaScript?

1

1 Resposta 1

2

Existem maneiras mais simples e fáceis de criar o comportamento que está buscando. De longe, optar pela mudança de posição do elemento é a mais suicida¹ pior.

Alterar a regra para position:relative poderá lhe trazer uma segunda dor de cabeça por causa do posicionamento dos elementos filhos que também terão suas posições afetadas por essa mudança.

¹ exageros a parte.


Segue uma proposta para criar essa transição suave na legenda, as explicações vem logo abaixo. Visualize o snippet em "página toda".

/* "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>

A ideia é bem simples e consiste simplesmente em esconder tudo que ultrapassar os limites do elemento figure. Nesse caso quem ultrapassará (propositalmente) esse limite é a legenda - elemento figcaption.

As explicações (ver comentários no CSS):

definimos o que foi dito acima, tudo que ultrapassar os limites de figure ficará oculto.

Em seguida () vem a mágica: Utilizamos a propriedade translateY para deslocar o elemento verticalmente, iremos desce-lo para que seu conteúdo ultrapasse o limite da tag figure e seja ocultado.

Para isso usamos uma função presente nas CSS chamada calc(), que como o nome sugere nos permite realizar cálculos na própria folha de estilos. Mas de onde vem esses 100% - 35px? Pois bem, 100% representa a altura do nosso elemento e os 35 pixels será o que deixaremos visível (ver 3º). O resultado dessa operação será o quanto do elemento figcaption que ficará oculto.

A grande vantagem de utilizar essa técnica é que, por mais que o conteúdo do parágrafo dentro da legenda aumente ele continuará oculto enquanto os 35px estarão visíveis.

No , tudo que precisamos fazer é deslocar verticalmente nosso elemento figcaption para a posição verdadeira dele quando houver o evento de hover no elemento figure.

Abaixo, vou deixar o mesmo código sem a propriedade overflow:hidden para ser mais fácil de visualizar o que acontece:

/* "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>

E outro exemplo aumentando o conteúdo do parágrafo na legenda:

/* "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>

3
  • Embora o código na pergunta utilize Bootstrap, como não há uma tag especificando que a resposta deveria utilizá-lo eu propus essa resposta sem depender de framework. 21/04/2015 às 10:04
  • Desconhecia o elemento figure, e ele trás o comportamento que eu precisava. 22/04/2015 às 19:37
  • @GuilhermeAlmeida Na verdade o que conta é o CSS, você pode fazer com div, span, p, etc. Já o figure é algo mais semântico. 22/04/2015 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .