Descrição de Fóruns/Tópicos

Detalhes da questão

Endereço do fórum: http://idem.forumeiros.org/forum
Versão do fórum: phpBB2

Descrição

Gostaria de saber como faço esse efeito nas imagens que coloco na descrição dos fóruns. Quando eu coloco o mouse sobre ela, a mesma se expande e aparece um texto abaixo. Fiz um print para lhe ajudar na compreensão

A Imagem do tópico está assim: https://i.servimg.com/u/f45/15/05/55/18/plano11.jpg

E quando o mouse está sobre a imagem ela fica assim: https://i.servimg.com/u/f45/15/05/55/18/plano010.jpg

Seja bem-vindo ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber: Regras do Fórum, e o que você não deve fazer neste fórum. Os demais fóruns de Suporte Forumeiros Lista de Tutoriais e astúcias e Questões frequentes. Conheça a Staff do Fórum dos Fóruns. Conheça a função Busca.

O senhor poderia liberar a visualização do fórum para convidados?

Liberado.

Olá,
Deixo-lhe aqui os meus boas vindas ao Fórum dos Fóruns!

---

Quanto à sua dúvida, leia:
-> https://ajuda.forumeiros.com/t106875-

o/

Muito obrigado Luiz, mas não funcionou. Eu quero que isso aconteça na imagem que eu vou colocar na descrição e não no título. Igual nas figuras que mostrei no início deste tópico.

Primeiramente, retire os códigos passados no tutorial acima.
Feito isso, acesse:
Painel de Controle Visualização Cores Folha de Estilo CSS.
E adicione o código a seguir na caixa de texto:

Código:

table.forumline .row1 .hidden {
  display: none;
}

table.forumline .row1:hover .hidden {
  display: block;
}

Feito isso, na descrição da categoria, você coloca assim:

Código:

<div class="hidden">CONTEÚDO ESCONDIDO</div>

E você pode colocar qualquer coisa aí dentro (imagens, textos, etc).
Assim que o usuário colocar o mouse no lugar da categoria, o conteúdo escondido será revelado, assim como na imagem a qual o senhor se referiu na mensagem acima.

o/

Na verdade não é bem isso que eu quero. Eu não conseguindo colocar esse negócio de transition. É isso que eu desejo, eu achei em outro fórum o código, mas não funcionou no meu.

Código ex:

transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-webkit-transition-duration: 0.9s;
-o-transition-duration: 0.9s;

Você quer a transição junto com o efeito acima?
Poderia passar o link do fórum em que o senhor viu o efeito?

o/

Nesse aqui: http://castelobruxorpg.foroactivo.com/

Ah sim, me desculpe, eu havia entendido outra coisa.
Adicione este código em sua CSS:

Código:

.row1 div br + img {
  transition: all ease 200ms;
  width: 400px;

}

.row1:hover div br + img {
  width: 500px;
}

RESULTADO:

o/

Deu certo, muito obrigado.