Efeito Moderadores 02
Preview (xx) Coloque essa parte antres <style> e </style>
/*/ MENO PFEITO POR BIANCA DIAS (NEVALISCA), PROIBIDO QUALQUER TIPO DE CÓPIA /*/ #nv-content{ width:450px; /*/ tamanho de todos os parceiros juntos, caso queria um em baixo do outro basta diminui esse numero /*/ height:relative; position:fixed; margin-top:230px; /*/ distancia do topo /*/ text-align:left; margin-left:250px; /*/ distancia da esquerda /*/ } #nv-equipe{ width:60px; /*/ tamanha da borda da foto: 10px a mais do tamanho da largura da foto /*/ height:60px;/*/ tamanha da borda da foto: 10px a mais do tamanho da altura da foto /*/ background:#d5afa7; /*/ cor da borda das fotos /*/ box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.2); display:inline-block; margin-bottom:10px; /*/ distancia de baixo da foto caso fique uma em baixo da outra /*/ margin-left:5px; /*/ distancia de uma foto e outra /*/ text-align:center; } #nv-equipe img{ width:50px; /*/ largura da foto /*/ height:50px; /*/ altura da foto /*/ margin-top:5px; transition-duration:.5s; } #nv-equipe:hover img{ -webkit-filter: grayscale(100%); transition-delay:0.4s; } #nv-ehover{ width:50px; /*/ largura da foto /*/ height:50px; /*/ altura da foto /*/ display:inline-block; position:fixed; margin-top:5px; margin-left:-50px; /*/ - a largura da foto /*/ background:rgba(213,175,167,0.5); /*/ cor do fundo no nome com rgb, o ultimo número é a opacidade, quanto menor o número mais transparent fica /*/ transform: scale(0); transition-duration:0.5s;} #nv-equipe:hover #nv-ehover{ transform: scale(1); } #nv-nome { width:50px; /*/ largura da foto /*/ height:50px; /*/ altura da foto /*/ display:inline-block; position:fixed; margin-top:5px; margin-left:-50px; /*/ - a largura da foto /*/ line-height:50px; /*/ altura d afoto /*/ font-family:'calibri'; /*/ font do nome /*/ font-size:9px; /*/ tamanho da font do nome /*/ letter-spacing:.5px; text-shadow:1px 1px 2px rgba(0,0,0,0.5); opacity:0; transition-duration:0.5s; } #nv-nome a{ color:#fff; /*/ cor da font do nome /*/ text-transform:uppercase;} #nv-equipe:hover #nv-nome { opacity:1; transition-delay:0.4s; } /*/ FIM DOS PARCEIROS, MANTENHA OS DEVIDOS CRÉDITOS/*/
Caso não saiba como usar color rgb basta entrar nesse site (aqui) e colocar o código da color hex (ex: #b0c4de) e logo abaixo da cor do color hex haverão 3 números entre parenteses que é o rgb (um exemplo aqui xxx). Como mencionei no código, o último número que tem lá é a opacidade.
Essa parte vai logo abaixo do <body> ou <body onkeydown=“return false”>
<!----- ESTILO DE MODERAÇÃO #02 POR NEVALISCA.TUMBLR.COM -----> <div id="nv-content"> <!--- um moderador: altere a url e o nome ---> <div id="nv-equipe"> <img src="http://api.tumblr.com/v2/blog/URL.tumblr.com/avatar/96/"> <div id="nv-ehover"></div> <div id="nv-nome"><a href="http://URL.tumblr.com" target="_blank">nome</a></div> </div> <!---- FIM DE UM MODERADOR ---> <!--- um moderador: altere a url e o nome ---> <div id="nv-equipe"> <img src="http://api.tumblr.com/v2/blog/URL.tumblr.com/avatar/96/"> <div id="nv-ehover"></div> <div id="nv-nome"><a href="http://URL.tumblr.com" target="_blank">nome</a></div> </div> <!---- FIM DE UM MODERADOR ---> <!--- um moderador: altere a url e o nome ---> <div id="nv-equipe"> <img src="http://api.tumblr.com/v2/blog/URL.tumblr.com/avatar/96/"> <div id="nv-ehover"></div> <div id="nv-nome"><a href="http://URL.tumblr.com" target="_blank">nome</a></div> </div> <!---- FIM DE UM MODERADOR ---> <!--- um moderador: altere a url e o nome ---> <div id="nv-equipe"> <img src="http://api.tumblr.com/v2/blog/URL.tumblr.com/avatar/96/"> <div id="nv-ehover"></div> <div id="nv-nome"><a href="http://URL.tumblr.com" target="_blank">nome</a></div> </div> <!---- FIM DE UM MODERADOR ---> <!--- um moderador: altere a url e o nome ---> <div id="nv-equipe"> <img src="http://api.tumblr.com/v2/blog/URL.tumblr.com/avatar/96/"> <div id="nv-ehover"></div> <div id="nv-nome"><a href="http://URL.tumblr.com" target="_blank">nome</a></div> </div> <!---- FIM DE UM MODERADOR ---> <!--- um moderador: altere a url e o nome ---> <div id="nv-equipe"> <img src="http://api.tumblr.com/v2/blog/URL.tumblr.com/avatar/96/"> <div id="nv-ehover"></div> <div id="nv-nome"><a href="http://URL.tumblr.com" target="_blank">nome</a></div> </div> <!---- FIM DE UM MODERADOR ---> </div>
Acrescente quantos moderadores quiser
*Qualquer duvida ou erro me procure*
Se usar/gostar dê like.
Não reblog ou repasse!
Não se esqueça de creditar
Bibi
