Como fazer uma imagem borrada entrar em foco ao passar o mouse

Escrito por kevin lee | Traduzido por elisa silva
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer uma imagem borrada entrar em foco ao passar o mouse
É possível transformar figuras usando CSS (Hemera Technologies/AbleStock.com/Getty Images)

O Cascading Style Sheets, ou simplesmente CSS, tem uma propriedade de opacidade que todos os navegadores modernos suportam. Ao alterar a transparência de um objeto, é possível deixá-lo translúcido, opaco ou transparente. Pode ser que você já tenha visto imagens que se alteram com o passar do mouse, podendo mudar sua aparência para algo completamente diferente. Há como criar o efeito oposto ao colocar uma camada translúcida em cima de uma figura e criar uma imagem desfocada que fica normal com o passar do mouse.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Cole o código abaixo em um documento HTML:

    <div>

    <div id="overlay" class="overlay" onmouseover="manageOverlay('unfade')" /> </div>

    <div onmouseout="manageOverlay('fade')"> <img id="myImage1" src=”ADICIONE NOME DA IMAGEM OU URL AQUI" /> </div

    Esse código cria um parent div block que contém dois "filhos" div blocks. O primeiro filho block, cuja id é overlay, referencia a uma classe CSS chamada overlay. O evento onmouseover causa uma função JavaScript chamada manageOverlay que roda quando o usuário passa o mouse por cima do overlay. O próximo div contém a imagem, e seu valor id é myImage1. Substitua ”ADICIONE NOME DA IMAGEM OU URL AQUI" com o nome da imagem no seu hard drive ou a URL de uma imagem na internet.

  2. 2

    Adicione o seguinte código na seção de estilo do documento:

    .overlay { display:block; position:absolute; background-color: White; opacity:0.38; filter:alpha(opacity=38); } </style>

    Esse código define os atributos de overlay, definindo a cor do background para "White" (branco) e a opacidade para 38 por cento. É preciso definir esse valor nos dois locais mostrados. O primeiro -- 0.38 -- é um número decimal que representa 38 por cento. O segundo -- 38 -- não tem ponto decimal, mas também representa 38 por centro.

  3. 3

    Cole o código mostrado a abaixo na seção de script:

    var overlayID = "overlay"; var imageID = "myImage1";

    var imageHeight; var imageWidth;

    Os dois primeiros guardam os valores ID do div overlay e a imagem nas variáveis chamadas "overlayID" e "imagemID". As últimas duas afirmativas são variáveis que a função mostrada no próximo passo usa.

  4. 4

    Adicione a seguinte função JavaScript abaixo do código mostrado no passo 3:

    window.onload = function () {

    var image = document.getElementById(imageID); var imageHeight = image.clientHeight; var imageWidth = image.clientWidth; var div = document.getElementById(overlayID); div.style.height = imageHeight; div.style.width = imageWidth; }

    Esse código roda quando um navegador carrega a página. O código garante que a altura e largura do overlay combinem com as medidas da imagem.

  5. 5

    Adicione esse bloco final de JavaScript abaixo do código mostrado no passo 4:

    function manageOverlay(action) {

    var div = document.getElementById(overlayID); if (action == "unfade") div.style.display = "none"; else div.style.display = "block" }

    Essa é a função que roda quando o ponteiro passa por cima da imagem e quando se afasta. O código esconde e mostra o overlay div, dependendo da localização do cursor.

  6. 6

    Salve o documento e carregue no navegador. A imagem vai parecer desfocada. Mova o cursor por cima da imagem para torná-la nítida. Afaste o cursor para a imagem desfocar novamente.

Dicas & Advertências

  • Experimente as configurações de opacidade para encontrar a aparência que funcionar melhor. No exemplo, o valor usado é 38 por cento, que cria um efeito moderado. Aumente esses valores para desfocar mais, diminua para dar nitidez.
  • É possível trocar a cor do overlay div para alterar o efeito. A cor usada no exemplo é branco.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível