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

Item: Como criar um quadro para exibir os membros de minha equipe?
Rating: 1

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
Criar - Como criar um quadro para exibir os membros de minha equipe? O_jWY5exS7K0lu7ts53kYw

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

Efeito que desejo
Criar - 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.

Criar - 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?

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

Criar - 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

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

Criar - 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".

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

Criar - 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?