Efeito Hover no Banner

2 participantes

Ir para baixo

Tópico resolvido Efeito Hover no Banner

Mensagem por Masonr 09.06.14 22:36

  • 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:
Fórum:http://fallendaysrpg.forumeiros.com/Versão:PHPBB2
Tipo:Erros diversosTags:Efeito,Hover,Banner

Masonr
Masonr
Novo Membro

Membro desde : 01/06/2014
Mensagens : 14
Pontos : 26

http://fallendaysrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover no Banner

Mensagem por Sennior 10.06.14 5:22

Saudações,

O senhor fez algo errado. Peço que faça novamente com atenção, pois o código resulta perfeitamente.

Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover no Banner

Mensagem por Masonr 10.06.14 5:41

Então, mas eu fiz todos os passos como pedido. Primeiro eu adicionei o CSS, depois fiz a página HTML, e como sugerido mais embaixo o JavaScript. Ai eu coloquei o código script na descrição e nada.

Eu clico em visualisar o HTML e aparece efeito, mas ele não vai pro fórum.

CSS:

Será que tem como descobrir o que eu to fazendo de errado? Alguma opção, sei la.
Masonr
Masonr
Novo Membro

Membro desde : 01/06/2014
Mensagens : 14
Pontos : 26

http://fallendaysrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover no Banner

Mensagem por Sennior 10.06.14 6:02

Olá amigo,

Arrumei uma maneira mais fácil:
Painel de Controle Seta Visualização Seta Página inicial Seta 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>

Depois vá em:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta 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;
}

Valide e veja o resultado. De bem com a vida

Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover no Banner

Mensagem por Masonr 10.06.14 6:14

SIM! Não ficou igual mas ta ótimo, perfeito! Consigo me virar daqui. Mas ainda tem um problema...  Louco 

Tem como arrumar esses bugs que aparece quando digita uma 'ç' ou um acento? E não ficar algo como: atenção que deveria ser atenção... Eu tive esse problema editando ele na página HTML do outro modo, todos os caracteres assim foram convertidos...
Masonr
Masonr
Novo Membro

Membro desde : 01/06/2014
Mensagens : 14
Pontos : 26

http://fallendaysrpg.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover no Banner

Mensagem por Sennior 10.06.14 6:17

Olá amigo,

Sim, dá. Se deseja que fique acima do logo como no outro fórum, troque o CSS por este:
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;
}

E sobre os Ç nas letras e tudo mais, basta alterar o HTML, ou seja a mensagem que esta na home page do seu fórum. Se não conseguir nos diga que fazermos para você. De bem com a vida

Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover no Banner

Mensagem por Masonr 10.06.14 6:30

Ah sim, consegui alterar e não modificou os caracteres. Mas mesmo trocando o CSS ele não saiu do lugar... =s

Bom, pelo menos funcionou e fico contente com esse resultado.  Feliz 
Masonr
Masonr
Novo Membro

Membro desde : 01/06/2014
Mensagens : 14
Pontos : 26

http://fallendaysrpg.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos