Efeito Blur css

Efeito Blur css

A propriedade Filter CSS permite que você aplique efeitos gráficos, como desfoque ou mudança de cores, na área ao fundo de um elemento.

O blur() é O efeito obtido com aplicação desta função de filtragem é o conhecido Gaussian blur ou desfoque gaussiano. O maior ou menor grau de desfoque é obtido pelo chamado raio de desvio da curva de Gauss. O raio de desvio é o parâmetro da função e deve ser expresso em uma unidade de medida CSS, de valor positivo.

Como fazer efeito de blur css

Neste tutorial ensinaremos como criar um efeito blur com css.

Nesta seção, projetaremos uma estrutura simples na tag <article>. 

temos dentro da tag <div>  as tags <img>,<h2>,<p>, e a tag <a>. Essas tags usaremos para criar a nosso  efeito Blur.

Vamos Adicionar o HTML

    <article class="box-article">
                
        <div class="box efeito-blur">
            <img src="uploads/imagem.jpg" alt="Front-end">
            <h2>Front-end</h2>
            <p><a href="#" target="_blank" title="Leia mais">Leia mais</a></p>
        </div>
                
    </article>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar a nosso Efeito Blur.

.box-article {

  max-width: 420px;
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: auto;

}

.box {

  position: relative;
  max-height: 300px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 1px 0px 1.2px 0px #e3e3e3;

}

.box h2, .box p {
  position: absolute;
  color: #fff;
  z-index: 2;
  width: 100%;
  transition: opacity 0.2s, transform 0.3s;
}

.box h2 {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 0;
  letter-spacing: 1px;
}

.box p {

  bottom: 0;
  font-size: 14px;
  letter-spacing: 1px;

}

.box h2, .box p {

  position: absolute;
  color: #fff;
  z-index: 2;
  width: 100%;
  transition: opacity 0.2s, transform 0.3s;

}

.box h2 {

  font-family: 'open_sansbold';
  font-size: 32px;
  margin-bottom: 0;
  letter-spacing: 1px;

}

.box p {

  bottom: 0;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;

}

.box p a{
   
  text-decoration: none; 
  color: #00b7ff;

}

.box img {

  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s ease-in-out;

}

.efeito-blur h2 {
  
  top: 50%;
  transform: translatey(-50%);
  text-align: center;
  margin: 0;

}

.efeito-blur p {

  text-align: center;
  top: calc(50% + 25px);
  transition: all 0.6s ease;
  opacity: 0;

}


.efeito-blur:hover img  {

  filter: blur(4px);


}


.efeito-blur:hover p {

  transition: all 0.6s ease;
  opacity: 1;

}

Combinando as Duas seções acima Html + Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando