resolvido Definir espaço

[JRaphael]

O que posso fazer para que isso ocupe apenas o espaço da imagem?

 

 

 

 

<style type="text/css">

.container {

  position: auto;

  width: 100%;

}

 

.image {

  display: block;

  width: 100%;

  height: auto;

}

 

.overlay {

  position: absolute;

  bottom: 100%;

  left: 0;

  right: 0;

  background-color: #BC2121;

  overflow: hidden;

  width: 100%;

  height:0;

  transition: .5s ease;

}

 

.container:hover .overlay {

  bottom: 0;

  height: 100%;

}

 

.text {

  white-space: nowrap; 

  color: white;

  font-size: 20px;

  position: absolute;

  overflow: hidden;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

}</style>

<div class="container"><img alt="Avatar" class="image" src="URLDAIMAGEM.png" />

<div class="overlay">

<div class="text">Tempos de Punição</div>

</div>

</div>

 

[JRaphael]

UP

[SnowRunescape]

não entendi o nque vc quis dizer... poredia explicar melhor?

[JRaphael]

não entendi o nque vc quis dizer... poredia explicar melhor?

Tipo, aparece em todo espaço (fica por cima do avatar e informações do membro), queria que ficasse só por cima da imagem mesmo.

[SnowRunescape]

Tipo, aparece em todo espaço (fica por cima do avatar e informações do membro), queria que ficasse só por cima da imagem mesmo.

sim mas onde que ta por cima do que? mas ok, pra arrumar isso vc define um z-index:1; z-index:2;

 

assim vc define quem tem que ficar na frente :)

ajudei? da like e resolvido

Editado Janeiro 20, 2017 por SnowRunescape

[JRaphael]

Pode dar resolvido, acho que não vou conseguir explicar.

[leonardosc]

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.


Atenciosamente,
Gamer's Board