0

Alguém sabe algum modelo de css pronto para eu usar como referência para recriar um efeito no meu site que estou passando de wordpress para html/css Vi pelo código que é uma mascara de camada hover que cria o efeito, mas ainda não consegui reproduzir igual usando html/css.

São estes ícones que circulei de azul Quero criar um efeito igual neste ícones usando apenas html/css (quando o mouse passar em cima da imagem circular a mascara diminui e aumenta o tamanho da imagem, já quando o mouse não esta em cima da imagem ela aparece com uma mascara maior que faz com que ela pareça ser menor)

endereço dos sites são:

https://mdwebdesign.tk/
https://demo.presscustomizr.com/

as imagens são:

https://i.ibb.co/M6SxXqN/efeitohover.jpg
https://i.ibb.co/sJwfW3d/efeitohover2.jpg

a busy cat a busy cat

Código:

html:

<main>
    <div class="linkshome">
        <div class="czr-link-mask">
            <a href="portfolio.html">
                <img src="img/portfolio.jpg">
                <h4>Portfólio</h4>
            </a>
        </div>
        <div class="czr-link-mask">
            <a href="servicos.html">
                <img src="img/servicos.jpg">
                <h4>Serviços</h4>
            </a>
        </div>
        <div class="czr-link-mask">
            <a href="contato.html">
                <img src="img/contato.jpg">
                <h4>Contato</h4>
            </a>
        </div>
    </div>     
</main>

css:

main {
    margin-left: 90px;
    margin-right: 60px;
    padding: 20px;

}

.linkshome {
    display: flex;
    justify-content: center;
}

.linkshome h4{
    text-align: center;
}

/*Efeito Destaques (ainda testando efeitos para portfólio,serviços e contato.jpg)*/

.czr-link-mask-p.hover .czr-link-mask::before,.expanded .czr-link-mask::before, .czr-link-mask:hover {
    -webkit-transform:translate(-50%,-50%) scale(1.4);
    transform:translate(-50%,-50%) scale(1.4);
    -webkit-transform:translate3d(-50%,-50%,0) scale(1.4);
    transform:translate3d(-50%,-50%,0) scale(1.4);
}

/*Destaques*/
4
  • Coloque o que vc já tem de código ai, só o link do exemplo do link não ajuda a resolver o seu problema. Vc precisa fornecer o que já tem de modelo pronto ai pra podermos te dar uma solução pro seu caso.
    – hugocsl
    14/01/2019 às 18:39
  • 1
    Amigo, acho que vc não reparou, mas existe um botão escrito EDITAR logo abaixo do texto da sua pergunta. Vc deve clicar nele e incluir esses codigos todos direto dentro da sua pergunta, e não nos comentários aqui....
    – hugocsl
    14/01/2019 às 19:02
  • Cara dei uma formatada no código, mas para votarem para reabrir é preciso que vc edite também descrevendo esse efeito de hover que vc quer. Quem chegar agora e ler a pergunta só vai ver o código... cade a descrição do efeito que vc quer fazer? Agora sim vc pode deixar o código mais a explicação e o link do exemplo e tudo mais. Não encare como uma puxada de orelha, apenas estou te dando dicas para vc conseguir bolar suas perguntas dentro dos padrões do site. Abs
    – hugocsl
    14/01/2019 às 19:25
  • 1
    Ok Obrigado Já editei a pergunta com o maior tipo de detalhes que lembrei 15/01/2019 às 17:54

1 Resposta 1

0

Esse é apenas um exemplo, pode ter outras respostas com soluções diferentes. Basicamente para isso não existe uma única resposta...

A técnica que usei foi colocar a imagem dentro de uma div, pois não é possível usar pseudo-elemento direto na tag img. Então eu fiz o pseudo elemento na div que a imagem vai estar dentro.

inserir a descrição da imagem aqui

Então nesse ::after da div container da imagem eu usei um box-shadow para fazer a "mascara", no :hover e passo esse box-shadow para zero, com isso não preciso mexe na escala da imagem, e trabalho apenas como esse pseudo elemento... O detalhe é que a cor do box-shadow tem que ser a mesma cor do fundo.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


main {
  margin-left: 90px;
  margin-right: 60px;
  padding: 20px;

}

.linkshome {
  display: flex;
  justify-content: center;
}

.linkshome h4 {
  text-align: center;
}

/*Efeito Destaques (ainda testando efeitos para portfolio,serviços e contato.jpg)*/

.czr-link-mask {
  margin: 2rem;
}
.czr-link-mask .box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
}
.czr-link-mask .box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px #fff;
  z-index: 2;
  transition: box-shadow 300ms;
}
.czr-link-mask a:hover .box::after{
  box-shadow: inset 0 0 0 0px #fff;
}
.czr-link-mask .box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid white;
  box-sizing: border-box;

}

/*Destaques*/
<main>
  <div class="linkshome">
    <div class="czr-link-mask">
      <a href="portfolio.html">
        <div class="box">
          <img src="https://placecage.com/100/100">
        </div>
        <h4>Portfólio</h4>
      </a>
    </div>
    <div class="czr-link-mask">
      <a href="portfolio.html">
        <div class="box">
          <img src="https://placecage.com/101/100">
        </div>
        <h4>Serviços</h4>
      </a>
    </div>
    <div class="czr-link-mask">
      <a href="portfolio.html">
        <div class="box">
          <img src="https://placecage.com/100/101">
        </div>
        <h4>Contato</h4>
      </a>
    </div>
  </div>

</main>


Opção para cor sólida

Quando a cor do box for sólida fica ainda mais fácil, pois vc pode trabalhas apenas no :hover do box, não precisa de classe para imagem ou pseudo elementos

inserir a descrição da imagem aqui

main {
   margin-left: 90px;
   margin-right: 60px;
   padding: 20px;

}

.linkshome {
   display: flex;
   justify-content: center;
}

.linkshome h4 {
   text-align: center;
}

/*Efeito Destaques (ainda testando efeitos para portfolio,serviços e contato.jpg)*/

.czr-link-mask {
   margin: 2rem;
}
.czr-link-mask .box {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   position: relative;
   background-color: navy;
   box-shadow: 0 0 0 0px navy;
   transition: box-shadow 300ms;
}
.czr-link-mask .box:hover {
   box-shadow: 0 0 0 10px navy;
}



/*Destaques*/
<main>
   <div class="linkshome">
      <div class="czr-link-mask">
      <a href="portfolio.html">
         <div class="box">
            <img src="https://cdn1.iconfinder.com/data/icons/icons-for-sharing-your-works/48/Behance_2.png">
         </div>
         <h4>Portfólio</h4>
      </a>
      </div>
      <div class="czr-link-mask">
      <a href="portfolio.html">
         <div class="box">
            <img src="https://cdn1.iconfinder.com/data/icons/icons-for-sharing-your-works/48/Behance_2.png">
         </div>
         <h4>Serviços</h4>
      </a>
      </div>
      <div class="czr-link-mask">
      <a href="portfolio.html">
         <div class="box">
            <img src="https://cdn1.iconfinder.com/data/icons/icons-for-sharing-your-works/48/Behance_2.png">
         </div>
         <h4>Contato</h4>
      </a>
      </div>
   </div>

</main>

9
  • Eu testei os dois exemplos, estão funcionado normal, mas quando apenas substituo as imagens para as que eu quero o efeito para de funcionar 16/01/2019 às 17:51
  • @matheusdouradobr se funciona aqui deveria funcionar ai tb... A sua imagem funciona fora do exemplo? Ela carrega normalmente se estiver fora desse código ai?
    – hugocsl
    16/01/2019 às 17:54
  • Carrega sim, no segundo exemplo mudei as imagens para .png ai ja funcionou um pouco, já no primeiro exemplo nem em jpg nem em png funcionou, as imagens são estas: i.ibb.co/zr9rznS/contato.png i.ibb.co/DrFsHJ7/servicos.png i.ibb.co/DCZcS5k/portfolio.png i.ibb.co/brh6M2C/contato.jpg i.ibb.co/CJqddTS/servicos.jpg i.ibb.co/fX5nySk/portfolio.jpg 16/01/2019 às 18:48
  • @matheusdouradobr acho que pode ser problema de "crossbrowser" talvez... vc pode testar no Chrome na versão mais nova e ver se melhora...
    – hugocsl
    16/01/2019 às 18:52
  • @matheusdouradobr acho que já sei qual é o problama!! É que a sua imagem não vai até as bordas. Tipo olha no JPG, repara que o círculo com o ícone está no centro depois tem uma "borda" gigante até o final.... Vc tem que ajustar as suas imagens, elas tem que ser do tamanho total do arquivo e não ficar com esses espaços vazios... olha aqui prntscr.com/m83fj5
    – hugocsl
    16/01/2019 às 19:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .