Como criar um quadro para exibir os membros de minha equipe?

por Roevs 29.08.17 18:26

Detalhes da questão

Endereço do fórum: http://narutoeternalrpg.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Olá,

Estou criando um "quadro de equipe", mas acabei chegando em um impasse, quero fazer algo mas não estou encontrando o meio para fazer

Quadro
Como criar um quadro para exibir os membros de minha equipe? O_jWY5exS7K0lu7ts53kYw

Como criar um quadro para exibir os membros de minha equipe? O_jWY5exS7K0lu7ts53kYw

Efeito que desejo
Como criar um quadro para exibir os membros de minha equipe? UXliMGO

Desejo meio que ao passar o mouse sobre o avatar apareça um quadro ao lado e nele tenha quadros separados, uns 4, que eu possa colocar informações variadas.

Código do quadro

Código:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel" /> <div class="inner"> <span class="corners-top"><span></span></span> <div class="mes-txt"> <div style="width: 800px; background:url(https://images2.alphacoders.com/722/thumb-1920-72270.jpg); border: 109px solid transparent; height:120px; margin-left: -25px;"> <br /> <center> <div style="margin-top: -120px; font: 45px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white;"> Naruto Eternal RPG - EQUIPE <div style="margin-top: 0px; font: 12px montserrat; text-transform: uppercase; letter-spacing: 10px; text-align: center; color: white; font-style: italic; font-family: 'Cinzel', serif;"> Bem vindo à nova era! </div> </div> <div style="width: 750px; height:150px; margin: 0px; font: 25px montserrat; text-transform: uppercase; padding: 15px; border: 2px solid white; display: inline-block; color: white;"> <table> <tbody> <tr> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://fc02.deviantart.net/fs71/f/2012/121/6/b/naruto_avatar_by_milani0-d4y5xkj.jpg'); border-radius: 100%; background-position-x: -19px; background-position-y: -12px;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Matthew <div style="margin-left: -10px; margin-top: -15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 8px; line-height: normal; font-family: montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Administrador </div> </div> </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> </td> </tr> </tbody> </table> <div style="margin-top: 10px; font-size: 8px; padding: 15px; letter-spacing: 5px; text-align: center; color: white;"> Naruto Eternal RPG @ Todos os créditos reservados </div> </div> </center> </div> </div><span class="corners-bottom"><span></span></span> </div>

Até!

por Kyo Panda 30.08.17 19:51

Troque por esse:

Código:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel" /> <style> .fa-team-table td { position: relative; } .fa-team-info { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); opacity: 1; pointer-events: none; transition: 250ms opacity; } .fa-team-table td:hover .fa-team-info { opacity: 1; pointer-events: auto; } .fa-team-info-row { padding: 15px; color: #fff; } </style> <div class="inner"> <span class="corners-top"><span></span></span> <div class="mes-txt"> <div style="width: 800px; background:url(https://images2.alphacoders.com/722/thumb-1920-72270.jpg); border: 109px solid transparent; height:120px; margin-left: -25px;"> <br /> <center> <div style="margin-top: -120px; font: 45px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white;"> Naruto Eternal RPG - EQUIPE <div style="margin-top: 0px; font: 12px montserrat; text-transform: uppercase; letter-spacing: 10px; text-align: center; color: white; font-style: italic; font-family: 'Cinzel', serif;"> Bem vindo à nova era! </div> </div> <div style="width: 750px; height:150px; margin: 0px; font: 25px montserrat; text-transform: uppercase; padding: 15px; border: 2px solid white; display: inline-block; color: white;"> <table class="fa-team-table"> <tbody> <tr> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://fc02.deviantart.net/fs71/f/2012/121/6/b/naruto_avatar_by_milani0-d4y5xkj.jpg'); border-radius: 100%; background-position-x: -19px; background-position-y: -12px;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Matthew <div style="margin-left: -10px; margin-top: -15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 8px; line-height: normal; font-family: montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Administrador </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> </tr> </tbody> </table> <div style="margin-top: 10px; font-size: 8px; padding: 15px; letter-spacing: 5px; text-align: center; color: white;"> Naruto Eternal RPG @ Todos os créditos reservados </div> </div> </center> </div> </div><span class="corners-bottom"><span></span></span> </div>

por Roevs 30.08.17 20:02

Olá,

Ficou deste modo.

Como criar um quadro para exibir os membros de minha equipe? MqYrepibTG6jKlgl1MpF8A

att,

por Kyo Panda 30.08.17 20:31

Troque por esse:

Código:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel" /> <style> .fa-team-table td { position: relative; } .fa-team-info { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: 250ms opacity; } .fa-team-table td:hover .fa-team-info { opacity: 1; pointer-events: auto; } .fa-team-info-row { font-size: 12px; line-height: 1.5em; padding: 10px; text-align: center; color: #fff; } </style> <div class="inner"> <span class="corners-top"><span></span></span> <div class="mes-txt"> <div style="width: 800px; background:url(https://images2.alphacoders.com/722/thumb-1920-72270.jpg); border: 109px solid transparent; height:120px; margin-left: -25px;"> <br /> <center> <div style="margin-top: -120px; font: 45px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white;"> Naruto Eternal RPG - EQUIPE <div style="margin-top: 0px; font: 12px montserrat; text-transform: uppercase; letter-spacing: 10px; text-align: center; color: white; font-style: italic; font-family: 'Cinzel', serif;"> Bem vindo à nova era! </div> </div> <div style="width: 750px; height:150px; margin: 0px; font: 25px montserrat; text-transform: uppercase; padding: 15px; border: 2px solid white; display: inline-block; color: white;"> <table class="fa-team-table"> <tbody> <tr> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://fc02.deviantart.net/fs71/f/2012/121/6/b/naruto_avatar_by_milani0-d4y5xkj.jpg'); border-radius: 100%; background-position-x: -19px; background-position-y: -12px;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Matthew <div style="margin-left: -10px; margin-top: -15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 8px; line-height: normal; font-family: montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Administrador </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> <td> <div style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> </div> </div> </div> <div class="fa-team-info"> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> <div class="fa-team-info-row"> Texto </div> </div> </td> </tr> </tbody> </table> <div style="margin-top: 10px; font-size: 8px; padding: 15px; letter-spacing: 5px; text-align: center; color: white;"> Naruto Eternal RPG @ Todos os créditos reservados </div> </div> </center> </div> </div><span class="corners-bottom"><span></span></span> </div>

por Roevs 30.08.17 20:46

Olá,

Teria como colocar meio que para aparecer um quadro ao lado, parecido com esse abaixo?

Como criar um quadro para exibir os membros de minha equipe? O28O5hQcR8mjrqZePKA9Ow

Como criar um quadro para exibir os membros de minha equipe? O28O5hQcR8mjrqZePKA9Ow

Fórum onde encontrei o efeito acima " http://www.brasilplayultimate.com.br/forum "

Att,

por Kyo Panda 30.08.17 20:50

Nesse caso o senhor não precisaria do meu script. Teria que apenas usar isso:

https://ajuda.forumeiros.com/t108127-tutorial-caixa-de-informacoes-do-membro-em-hover

E colocar o link para os perfis nas imagens.

por Roevs 30.08.17 20:55

Olá,

Mas não desejo tal efeito sobre o nome dos usuários, eu queria que ao passar o mouse sobre o avatar no quadro que estou fazendo apareceria um quadro igual a essa.
No momento quando passa o mouse aparece "TEXTO TEXTO TEXTO", queria que isso aparecesse em um quadro igual ao da imagem.
Não sei se consegui explicar o que desejo.

att,

por Roevs 01.09.17 11:44

por Shek 02.09.17 1:48

Boa noite.

Por favor, tente com este código:

Código:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel" /> <style type="text/css" name="Shek_CrowleyFDF_2017"> .userMod:hover div.details { display: block !important; } .details { display: none; position: relative; left: 0; top: 0; z-index: 5; padding: 5px; background: black; margin-left: -5px; margin-right: -5px !important; } .details p { background: #fff; color: black; } </style> <div class="inner"> <span class="corners-top"><span></span></span> <div class="mes-txt"> <div style="width: 800px; background:url(https://images2.alphacoders.com/722/thumb-1920-72270.jpg); border: 109px solid transparent; height:120px; margin-left: -25px;"> <br /> <center> <div style="margin-top: -120px; font: 45px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white;"> Naruto Eternal RPG - EQUIPE <div style="margin-top: 0px; font: 12px montserrat; text-transform: uppercase; letter-spacing: 10px; text-align: center; color: white; font-style: italic; font-family: 'Cinzel', serif;"> Bem vindo à nova era! </div> </div> <div style="width: 750px; height:150px; margin: 0px; font: 25px montserrat; text-transform: uppercase; padding: 15px; border: 2px solid white; display: inline-block; color: white;"> <table> <tbody> <tr> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://fc02.deviantart.net/fs71/f/2012/121/6/b/naruto_avatar_by_milani0-d4y5xkj.jpg'); border-radius: 100%; background-position-x: -19px; background-position-y: -12px;"> <div class="temUser" style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Matthew <div style="margin-left: -10px; margin-top: -15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 8px; line-height: normal; font-family: montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Administrador </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </td> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </td> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </div> </td> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> <div style="margin-top: 10px; font-size: 8px; padding: 15px; letter-spacing: 5px; text-align: center; color: white;"> Naruto Eternal RPG @ Todos os créditos reservados </div> </div> </center> </div> </div><span class="corners-bottom"><span></span></span> </div>

Tentei chegar próximo ao que você pediu, mas, teste-o primeiro. Piscada

por Roevs 05.09.17 12:23

Olá,

Está no caminho, teria como por para aparecer ao lado, no quadro que marquei em branco

Como criar um quadro para exibir os membros de minha equipe? 71zKuzwPTQy5RKsoW9gKgg

Como criar um quadro para exibir os membros de minha equipe? 71zKuzwPTQy5RKsoW9gKgg

E também o fundo do quadro poder ser branco com uma borda fina, não precisa ser transparente, e se possível quando passar o mouse sobre um os outros ao lado sumisse.

att,

por Shek 06.09.17 1:49

Olá novamente.

Substitua por este novo código:

Código:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel" /> <style type="text/css" name="Shek_CrowleyFDF_2017"> .userMod:hover div.details { display: block !important; } .details { display: none; position: relative; left: 100px; top: -100px; z-index: 5; padding: 5px; background: black; margin-left: -25px; margin-right: -50px !important; } .details p { background: #fff; color: black; } </style> <div class="inner"> <span class="corners-top"><span></span></span> <div class="mes-txt"> <div style="width: 800px; background:url(https://images2.alphacoders.com/722/thumb-1920-72270.jpg); border: 109px solid transparent; height:120px; margin-left: -25px;"> <br /> <center> <div style="margin-top: -120px; font: 45px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white;"> Naruto Eternal RPG - EQUIPE <div style="margin-top: 0px; font: 12px montserrat; text-transform: uppercase; letter-spacing: 10px; text-align: center; color: white; font-style: italic; font-family: 'Cinzel', serif;"> Bem vindo à nova era! </div> </div> <div style="width: 750px; height:150px; margin: 0px; font: 25px montserrat; text-transform: uppercase; padding: 15px; border: 2px solid white; display: inline-block; color: white;"> <table> <tbody> <tr> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://fc02.deviantart.net/fs71/f/2012/121/6/b/naruto_avatar_by_milani0-d4y5xkj.jpg'); border-radius: 100%; background-position-x: -19px; background-position-y: -12px;"> <div class="temUser" style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center;"> <br /><br /><br /> Matthew <div style="margin-left: -10px; margin-top: -15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 8px; line-height: normal; font-family: montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Administrador </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </td> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </td> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </div> </td> <td> <div class="userMod" style="width: 120px; height: 120px; border-right: 2px solid #fff; border-left: 2px solid transparent; margin-top: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 10px; border-radius: 100%;"> <div style="width: 120px; height: 120px; background-image: url('http://www.ccdob.com.br/forum/download/file.php?avatar=650334_1463440359.png'); border-radius: 100%;"> <div style="margin-top: 0px; font: 15px montserrat; text-transform: uppercase; padding: 15px; text-align: center; color: white; opacity: 0.7;"> <br /><br /><br /> Vaga <div style="margin-top: -15px; font: 8px montserrat; text-transform: uppercase; padding: 15px; letter-spacing: 1px; text-align: center; color: white;"> Vaga </div> <div class="details"> <p>TEXT_01</p> <p>TEXT_02</p> <p>TEXT_03</p> </div> </div> </div> </div> </div> </td> </tr> </tbody> </table> <div style="margin-top: 10px; font-size: 8px; padding: 15px; letter-spacing: 5px; text-align: center; color: white;"> Naruto Eternal RPG @ Todos os créditos reservados </div> </div> </center> </div> </div><span class="corners-bottom"><span></span></span> </div>

Até mais.

por Roevs 06.09.17 12:00

Olá,

Só o primeiro quadro ficou com o fundo preto, o resto continua com o fundo transparente.
Teria como mover o quadro um pouco mais para cima, para ficar uniforme com o "avatar".

Como criar um quadro para exibir os membros de minha equipe? XJq-EkYcSh2K8NF9dc6fVA

Como criar um quadro para exibir os membros de minha equipe? XJq-EkYcSh2K8NF9dc6fVA

Queria o quadro se possível do modo acima, parecendo que ele está saindo do avatar e no fim do quadro, se der, poderia arredondar as bordas um pouco.

att,

por Kyo Panda 12.09.17 14:54

Agrada-o? https://codepen.io/KyoPanda/pen/boGVNa

por Roevs 12.09.17 17:12

Olá,

Ficou ao meu agrado, pode me passar o código montado?

Até.

por Kyo Panda 12.09.17 19:29

Se abrir o link que te passei, existem três paineis: HTML, CSS e JavaScript. Coloque o conteúdo do HTML dentro da mensagem da página inicial, como está fazendo, e o CSS na sua folha de estilos CSS.

por Roevs 12.09.17 19:49

Olá,

O nome das pessoas no caso "Matthew - Administrador", está em forma de link, seria possível retirar isso, quero em forma de texto.

Até.

por Kyo Panda 12.09.17 20:01

Adicione ao CSS:

Código:: .fa-panel-members-details { cursor: default; }

por Roevs 12.09.17 20:56

Olá,

Não teve resultado.

Até.

por Kyo Panda 12.09.17 21:00

Acessei o seu fórum e as imagens já não estão mais com o cursor de link. O que quer?

Se se refere à cor, adicione ao CSS:

Código:: .fa-panel-members-details > div { color: #fff; }

por Roevs 13.09.17 12:01

Olá,

Agora sim, obrigado.

Ate.

por Kyo Panda 13.09.17 12:20

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Como criar um quadro para exibir os membros de minha equipe?