Jump to content
thailangodoy

Borda externa - Efeito hover

Recommended Posts

Boa tarde amigos,

 

Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.

 

Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.

 

image.png.e129d25bede9639b5b066d394e2b9ef4.png

image.png

Share this post


Link to post
Share on other sites

Olá,

Segue:

.photo-effect img {
    border: 4px solid transparent;
    -webkit-border-radius:80px;
    -moz-border-radius:80px;
    border-radius:80px;
}

.photo-effect img:hover {
    border: 4px solid #777;
}

 

<div class="photo-effect">
	<img class="effect" src="https://source.unsplash.com//WNoLnJo7tS8/100x100">
</div>

Resultado: https://jsfiddle.net/du6oLjre.

Caso prefira, aplica um efeito transition para deixá-lo mais suave.

 

Abraços!

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By Carcleo
      Estou a um tempo tentando criar um slider personalizado.
      De fato, eu até consegui e coloquei no codepen. https://codepen.io/carcleo/pen/yLVOxMv
       
      Mas uma implementação não estou conseguindo fazer.
       
      Nos sliders prontos que pegamos na web, ao redimencionar manualmente o navegador,   a UL que abriga as LI's com os Slides, se redimenciona junto e isso não acontece com o meu, Isto é, ao diminuir a janela do navegador, as imagens acompanham o tamanho das LIs, mas como não consigo redimencinar a UL junto os slides acabam se mostrando de forma errada. 
       
      Não consegui uma forma de fazer o CSS fazer esse serviço. Só consegui com JS.
       
      Se alguém puder ajudar?
       
      Obs.: não quero copiar da internet, meu objetivo é entender a logica da coisa
    • By PedroHRLeite
      Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?
      <!DOCTYPE html> <html> <head> <style> .wideBody .side-column { float: right; order: 2; width: 300px; } .wideBody .side-column footer { position: sticky; position: -webkit-sticky; top: 0; } .wideBody .main-column { align-self: flex-start; float: left; width: 500px; border: 2px solid #4CAF50; } .resultados { border: 2px solid #4CAF50; margin-bottom:25px; position:relative; } footer { border: 2px solid #4CAF50; } </style> </head> <body class="wideBody"> <main> <div> <div class="main-column"> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> </div> <aside class="side-column"> coluna auxiliar <div class="resultados"> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> </div> <footer> rodape fixo </footer> </aside> </div> </main> </body> </html>  
    • By Vanderson Bilck Barbosa
      Boa tarde;
      Busco ajuda com um assunto não muito comum e que já esta me tirando o sono a 2 dias....
      Estou gerando PDFs com o DOMPDF, porém alguns itens que são cadastrados no banco via TextArea não se alinham conforme o restante dos demais.
       
      *** Ressalto que já tentei todas as formas de alinhamento CSS possíveis, tanto diretamente no item quanto no css integrado, limpei os itens no textarea (https://summernote.org/) que são adicionados automático (exemplo: <p></p> ).
       
      1 - Arquivo que busca o arquivo já renderizado .php.
      <?php
      use Dompdf\Dompdf;
      $dompdf = new Dompdf(["enable_remote" => true]);
      $dompdf->setPaper('A4', 'portrait');
      ob_start();
      require "views/adm/ordemdeproducao.php";
      $dompdf->loadHtml(ob_get_clean());
      $datagera = date('dmY-His');
      $dompdf->render();
      $dompdf->stream("OrdemProducao_$datagera.pdf", array("Attachment" => false));
       
      2 - trecho do Arquivo que é chamado pelo anterior
                                 <tr style="background-color: #FFFFFF;">
                                      <td>
                                          <table>
                                              <tr>
                                                  <td class="bglaranja1 th titReceita">
                                                      <b>RECEITA:</b> <i><?php echo $receita->gettitulo(); ?></i>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table>
                                              <thead>
                                                  <tr>
                                                      <th class="th" width="60">ITEM</th>
                                                      <th class="th">PRODUTO</th>
                                                      <th class="th" width="60">UN</th>
                                                      <th class="th" width="60">QTDE</th>
                                                  </tr>
                                              </thead>
                                              <tbody>
                                                  <?php
                                                  $receitaItem = new Receita();
                                                  $itensReceita = $receitaItem->getProdutoReceita(array($receita->gettoken()));
                                                  foreach ($itensReceita as $itemCalc) {
                                                  ?>
                                                      <tr class="small">
                                                          <td class="text-center td"><?php echo $itemCalc["id_produto"]; ?></td>
                                                          <td class="td"><?php echo $itemCalc["nome_produto"]; ?></td>
                                                          <td class="text-center td"><?php echo $itemCalc["um_produto"]; ?></td>
                                                          <td class="text-center td"><?php echo number_format(intval($valueCardapio["quantidade"]) * floatval($itemCalc["quantidade"]), 0, '', '.'); ?></td>
                                                      </tr>
                                                  <?php } ?>
                                              </tbody>
                                          </table>
                                          <table style="background-color: #FFFFFF;">
                                              <tr>
                                                  <td class="td small" valign="top">
                                                      <p style="left: 0; text-align: left; margin-left: 0; border: 1px solid #FF0000;">
                                                          <b>MATERIAIS DA RECEITA</b><br />
                                                          <?php echo $receita->getmateriais(); ?>  //item que não se alinha (left) como os demais
                                                      </p>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table>
                                              <tr>
                                                  <td class="td small" valign="top" style="background-color: #FFFFFF;">
                                                      <p style="left: 0; text-align: left; margin-left: 0; border: 1px solid #FF0000;">
                                                          <b>MODO DE PREPARO</b><br />
                                                          <?php echo $receita->getmodo_preparo(); ?> //item que não se alinha (left) como os demais
                                                      </p>
                                                  </td>
                                                  <td class="td small" valign="top" style="background-color: #FFFFFF; width: 160px;">
                                                      <b>FOTO DA RECEITA</b><br />
                                                      <?php if ($receita->gettoken_img() == null) { ?>
                                                          <div class="image_receita" style="background-image: url('<? echo $urlFora;?>/views/adm/res/img/noimage-300.jpg')"></div>
                                                      <?php } else { ?>
                                                          <div class="image_receita" style="background-image: url('<? echo $urlFora;?>/img/<?php echo $receita->gettoken_img(); ?>/0/1')"></div>
                                                      <?php } ?>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table class="mb-1">
                                              <tr>
                                                  <td class="td small">
                                                      <b>Tempo de Preparo:</b> <?php echo $receita->gettempo_preparo(); ?> Minutos</td>
                                                  <td class="td small">
                                                      <b>Rendimento:</b> <?php echo $receita->getrendimento(); ?>
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td class="td small">
                                                      <b>Tipo da Porção:</b>
                                                      <?php
                                                      $porcao = new Porcao();
                                                      $porcao->loadByIdAtivo($receita->gettb_porcao_id());
                                                      echo $porcao->getmedida_caseira();
                                                      ?>
                                                  </td>
                                                  <td class="td small">
                                                      <b>Medida da Porção (gramas): <?php echo $receita->getvalor_porcao(); ?></b>
                                                  </td>
                                              </tr>
                                          </table>
                                      </td>
                                  </tr>
       
      3 - arquivo gerado em pdf (Imagem Anexo) - Itens vermelhos, são os mesmos comentados no fonte acima //item que não se alinha (left) como os demais

       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.