• Descrição:

Eu tava querendo um efeito, como esse: http://cptrpg.forumeiros.com
Acontece, que eu achei outro tópico com a mesma dúvida: https://ajuda.forumeiros.com/t92776-imagem-hover-banner
Segui todos os passos sugeridos, e não resultou em nada.
Alguém saberia uma maneira de colocar este efeito? Por favor.

• Informações:

CSS:

Painel de Controle Visualização Página inicial Geral

Código:

<br /><style>.banner:hover .banner4{left:50px;opacity:1;top:3px}.headertitle{color:#ebebeb;font-family:'Open Sans Condensed', sans-serif;font-size:20px;letter-spacing:-1px;line-height:100%;padding-right:10px;padding-top:10px;text-align:right;text-transform:uppercase;width:370px}.adminh{-moz-transition-duration:.6s;-ms-transition-duration:.6s;-o-transition-duration:.6s;-webkit-transition-duration:.6s;background-color:#3E1324;height:80px;opacity:0;padding:10px;text-align:center;transition-duration:.6s;width:80px}.adminh:hover{background-color:#3E1324;height:80px;opacity:.9;padding:10px;text-align:center;width:80px}.adminh a{color:#fff;text-align:center}.adminame{color:#fff;font-family:'Open Sans Condensed', sans-serif;font-size:15px;letter-spacing:-1px;line-height:100%;padding-top:20px;text-align:center;text-transform:uppercase}.headerlinks{-moz-column-count:2;-moz-column-gap:5px;-webkit-column-count:2;-webkit-column-gap:5px;column-count:2;column-gap:5px;height:80px;overflow:auto;padding:10px;width:255px}.headerlinks a{background-color:#75655F;color:#fff;display:block;font-family:calibri, sans-serif;font-size:8px;letter-spacing:1px;line-height:100%;margin-bottom:5px;padding-bottom:5px;padding-top:5px;text-align:center;text-transform:uppercase}BODY{color:#696969;font-family:Calibri, Verdana, Tahoma, Arial, sans-serif;font-size:10.5px;margin-left:0;margin-right:0}.pformstrip{background-color:#000;border-bottom:#970400 2px solid;color:#a4a4a4;font-family:courier new;font-size:8px;font-weight:lighter;padding-bottom:3px;padding-top:3px;text-align:center;text-transform:uppercase}.pformleft  {background-color:#e1e1e1;border-right:1px solid #a4a4a4;border-top:1px solid #a4a4a4;margin-top:1px;padding:6px;width:25%}.pformleftw{background-color:#e1e1e1;border-right:1px solid #a4a4a4;border-top:1px solid #a4a4a4;margin-top:1px;padding:6px;width:40%}.pformright{background-color:#e1e1e1;border-top:1px solid #a4a4a4;margin-top:1px;padding:6px}.wid{-moz-transition-duration:.5s;-moz-transition-property:color, background-color, border;-moz-transition-timing-function:linear;-webkit-transition-duration:.5s;-webkit-transition-timing-function:linear;background-color:maroon;font-size:10px;letter-spacing:1px;padding:10px;position:relative;text-align:center;text-transform:uppercase;top:1px;width:220px}.wid:hover{background-color:#fff}.img1{-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-filter:grayscale(100%);-webkit-transition:All 1s ease;transition:All 1s ease}</style><style>.banner{height:363px;margin-top: -0% !important;overflow:hidden;position:relative;width:996px}.banner .banner1{background-color:#1d1d1d;bottom:50px;height:130px;padding:10px;position:absolute;right:50px;width:380px}.banner .banner2{-moz-transition-duration:.6s;-ms-transition-duration:.6s;-o-transition-duration:.6s;-webkit-transition-duration:.6s;background-color:#1d1d1d;bottom:-200px;height:130px;left:50px;opacity:0;padding:10px;position:absolute;transition-duration:.6s;width:380px}.banner:hover .banner2{bottom:50px;left:50px;opacity:1}.banner .banner3{-moz-transition-duration:.6s;-ms-transition-duration:.6s;-o-transition-duration:.6s;-webkit-transition-duration:.6s;background-color:#1d1d1d;height:130px;opacity:0;padding:10px;position:absolute;right:-600px;top:3px;transition-duration:.6s;width:380px}.banner:hover .banner3{opacity:1;right:50px;top:3px}.banner .banner4{-moz-transition-duration:.6s;-ms-transition-duration:.6s;-o-transition-duration:.6s;-webkit-transition-duration:.6s;background-color:#1d1d1d;height:130px;left:-600px;opacity:0;padding:10px;position:absolute;top:3px;transition-duration:.6s;width:380px}.banner:hover .banner4{left:50px;opacity:1;top:3px}.headertitle{color:#ebebeb;font-family:'Open Sans Condensed', sans-serif;font-size:20px;letter-spacing:-1px;line-height:100%;padding-right:10px;padding-top:10px;text-align:right;text-transform:uppercase;width:370px}</style>
<div class="banner">
   
   <div class="banner1">
      
      <div style="width: 375px; padding-right: 5px; height: 100px; overflow: auto; text-align: justify; line-height: 100%;">
          Tudo começou com uma rebelião, a mesma não deu certo, o povo acreditou que poderia confiar em Katniss Everdeen, e que ela tinha um poder para levá-los a frente, a Esperança. De fato durante meio sÃÂculo isso funcionou muito bem, acoados as pessoas da Capital foram obrigadas a se espalhar pelos territórios onde antes eram demarcados os 13 distritos, mal sabiam o povo incrÃÂdulo que aos poucos uma sociedade secreta tramava sua volta, liderada por um homem de cabelos grisalhos, Deikos Rosenbelt. De forma silenciosa e calma aos poucos eles foram tramando o seu retorno triunfal, Panem nunca estaria mais em perigo para os rigos que vivem na Capital, o povo teria sua lição merecida, iriam pagar pelo que estavam fazendo. <br /> Tudo começou pelo distrito oito, onde os revoltosos da capital se concentravam, eles conseguiram aliados em meio ao povo, pessoas que mesmo sendo pobres almejavam a riqueza e o estilo de vida luxuoso da Capital, mesmo que para isso fosse necessário sacrificar vidas semelhantes. Deikos era persuasivo, conseguia enganar, manipular e persuadir todos a sua volta para que seguissem o que ele queria. Um por um os distritos em volta foram sendo tomados, nove, dez, sete, seis, logo em em dez anos eles já tinham o controle cinco dos treze distritos, se poder de fogo e seguidores era cada vez maior, acoados os moradores das áreas invadidas não tinham saída a não ser se aliar a eles pensando em vida melhor, pobres eram convencidos pelas palavras de paz de Deikos. <br /> O homem alistava novos pacificadores, jovem em vezes, estes não eram nada gentis na hora de agredir os revoltosos, muitas mortes aconteceram em longos vinte anos de reconquista, não pode-se dizer que foi fácil para ambas as partes, mas o grupo que seguia a Capital se mostrou soberanos e poderoso, capaz de enganar doze distritos frágeis em busca de um novo representante, todos ficaram iludidos e persuadidos, o nome de Deikos não era conhecido na Capital antes da revolta, suas palavras de apoio e suas mentiras de ajuda convenceram muita gente, mas não todos. Acoados, aqueles que não concordavam com o homem foram se esconder no distrito treze, agora já descoberto, era uma noite escura quando enfim a Capital foi tomada, o poder de novo fora restaurado! <br /> O primeiro desejo de Deikos com o povo foi que eles escolhessem o seu novo presidente para que se mostrasse a democracia, não houve outra, embriagados com falsas palavras de promessa, afeto e carinho o povo de Panem elegeu o homem como seu novo magnata, fora então seu maior erro, já que Deikos conseguia ser pior que Snow. Primeira ação fora explodir de fato e tirar do mapa o distrito treze que já planejava uma nova rebelião. Isso fora tão as escondidas que Panem inteira mal sob, para enganar os que ainda acreditavam foi erguida no lugar do distrito treze um local de diversão, onde todos os distritos poderiam interagir sob os olhos atentos de uma Capital ainda com certa ânsia, o local foi chamado de Paradise, um local para fazer amigos e se divertir a preços um pouco altos, mas as pessoas gastavam todo seu dinheiro lá, fora uma forma mais amigável da Capital conseguir cobrar os impostos e ganhar atàmais. <br /> Uma bomba caiu sobre o povo quando a notícia se espalhou, os Jogos Vorazes iriam retornar, em pânico a confusão se instaurou em Panem, novamente com sua lábia, mesmo que não fosse preciso, Deikos fez reinar a paz com a seguinte frase "Os Jogos são parte da nossa cultura, e o distrito campeão tem um impulsionamento de vida." muitos não foram convencidos, mas as pessoas de Panem aprenderam uma coisa em todos esses anos, que atacar silenciosamente, mas eles estavam em minoria, não puderam nada fazer a não ver cem anos de escravidão provinda dos Jogos atàhoje em dia. A nova presidente àSyena, era era bisneta de Deikos, seu avô assumiu o lugar do pai e com sua morte Syena ficou em seu lugar, já que o pai da mulher era totalmente contra aquele governo, por isso a mesma mandou matá-lo. Chegamos então ao 4º Massacre Quaternário pós revolução, o que se pode esperar de uma Capital mais sanguinária e menos piedosa?
      </div>
      
      <div class="headertitle">
          This is Capitol, bitches!
      </div>
      
   </div>
   
   <div class="banner2">
      
      <table cellpadding="0" cellspacing="0">
         
         <tbody>
            <tr>
               
               <td>
                  
                  <div style="width: 100px; height: 100px; background-image: url(https://31.media.tumblr.com/c88351dc006935e93112b0a2ae7fe937/tumblr_inline_n19o3l1Hqo1s6kieo.png);">
                     
                     <div class="adminh">
                        
                        <div class="adminame">
                            The Games.
                        </div>
                         <a href="">Actual Champion</a><br /><a href="http://cptrpg.forumeiros.com/u10">Esme Alvier</a>
                     </div>
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div style="width: 5px;">
                     
                  </div>
                  
               </td>
               
               <td>
                  
                  <div class="headerlinks">
                      <a href="http://cptrpg.forumeiros.com/f14-the-fcking-hunger-games">systems</a><a href="http://cptrpg.forumeiros.com/t4-the-districts">districts</a><a href="http://cptrpg.forumeiros.com/t3-face-claim-register-bitches">face claim</a><a href="http://cptrpg.forumeiros.com/t10-ficha-modelo">records</a><a href="http://cptrpg.forumeiros.com/t15-habilidades-descricao-em-construcao">occupation</a><a href="http://cptrpg.forumeiros.com/t15-habilidades-descricao-em-construcao">skills</a><a href="http://cptrpg.forumeiros.com/t134-a-trama">plot</a><a href="http://cptrpg.forumeiros.com/t42-os-mentores-cannons">canons</a><a href="http://cptrpg.forumeiros.com/t7-dicas-e-sugestoes">suggestions</a><a href="http://cptrpg.forumeiros.com/t8-reclamacoes">complaints </a><a href="http://cptrpg.forumeiros.com/t9-duvidas">doubts</a><a href="http://cptrpg.forumeiros.com/t148-parceiros">partners</a>
                  </div>
                  
               </td>
               
            </tr>
            
         </tbody>
      </table>
      
      <div class="headertitle">
          navigation time .
      </div>
      
   </div>
   
   <div class="banner4">
      
      <div style="width: 375px; padding-right: 5px; height: 100px; overflow: auto; text-align: justify; line-height: 100%;">
          <strong>TRIBUTOS SORTEADOS</strong> <br /><strong>Distrito 1</strong> - Cassandra & Hunter <br /><strong>Distrito 2</strong> - Lottie & Arwen <br /><strong>Distrito 3</strong> - Mark & Rob <br /><strong>Distrito 4</strong> - Melissa & Dany <br /><strong>Distrito 5</strong> - Lyra & Brandon <br /><strong>Distrito 6</strong> - Phöebe & Damen <br /><strong>Distrito 7</strong> - Robin & Ben <br /><strong>Distrito 8</strong> - Serafix & Vênus <br /><strong>Distrito 9</strong> - Alix & Charles <br /><strong>Distrito 10</strong> - Arien & Sirius <br /><strong>Distrito 11</strong> - Death & Damien <br /><strong>Distrito 12</strong> - Selene & Henry
      </div>
      
      <div class="headertitle">
          so here's what you missed .
      </div>
      
   </div>
   
   <div class="banner3">
      
      <div style="width: 375px; padding-right: 5px; height: 100px; overflow: auto; text-align: justify; line-height: 100%;">
          Não poderíamos deixar de agradecer todos aqueles que contribuíram de alguma forma com todo o processo de criação do fórum, tanto com a parte escrita como com a parte visual. Os sistemas aqui empregados são de autoria de Joy Weishaupt e Syena Rosenbelt, administradoras e fundadoras do fórum. Banners e artes especificas para o fórum são de autoria de Mila Weishaupt, feitos com base em fotografias retiradas do tumblr e do deviantart. Gostaríamos de agradecer as pessoas que tornaram viável esse lindo design que hoje esta concluído e em pleno funcionamento. Obrigada a Sarah Giacon pela base de nosso skin. Ao darren criss. do ATF and SHINE que foi quem disponibilizou o código base para esse lindo Hover que estamos atualmente usando em nosso banner. Ao Daniel Rabelo e a Larissa Vasconcelos que com muita paciência no coração e muita atenção corrigiram nossos tópicos base. Obrigada a todos! Nosso fórum àbaseado na trilogia distópica escrita por Suzanne Collins, The Hunger Games Mas as alterações e novidades referentes a trama como um todo são de autoria da administração, então, se for copiar algo, não esqueça de por os devidos crÃÂditos.
      </div>
      
      <div class="headertitle">
          roll the red carpet .
      </div>
      
   </div>
   
</div>

Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

.banner {
height: 363px;
margin-top: -71%;
overflow: hidden;
position: relative;
width: 996px;
}
.banner .banner1 {
background-color: #1d1d1d;
bottom: 50px;
height: 130px;
padding: 10px;
position: absolute;
right: 50px;
width: 380px;
}
.banner .banner2 {
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
-webkit-transition-duration: .6s;
background-color: #1d1d1d;
bottom: -200px;
height: 130px;
left: 50px;
opacity: 0;
padding: 10px;
position: absolute;
transition-duration: .6s;
width: 380px;
}

Código:

.banner {
height: 363px;
margin-top: -40% !important;
overflow: hidden;
position: relative;
width: 996px;
}
.banner .banner1 {
background-color: #1d1d1d;
bottom: 50px;
height: 130px;
padding: 10px;
position: absolute;
right: 50px;
width: 380px;
}
.banner .banner2 {
-moz-transition-duration: .6s;
-ms-transition-duration: .6s;
-o-transition-duration: .6s;
-webkit-transition-duration: .6s;
background-color: #1d1d1d;
bottom: -200px;
height: 130px;
left: 50px;
opacity: 0;
padding: 10px;
position: absolute;
transition-duration: .6s;
width: 380px;
}