[Duda] Como hacer este efecto

Citar

Escrito el 05 May 2016 11:56 am

Hola gente, soy nuevo me presento ante ustedes y queria pedirles una mano para ver si pueden resolver mi duda, hace unos años habia visto una pagina de una comunidad sobre un juego, el tema que al entrar al sitio tenias 3 opciones, el fondo de la izquierda te redireccionaba a una pagina (no viene al caso decir de que era la pagina) la del medio al foro y el otro fondo de la derecha hacia otra, el tema es que tenia un tema de desenfoque, cada lado tenia un fondo y cuando pasabas el click arriba de cada fondo aparecia como un efecto fantasma o sea se ponia en blanco pero se seguia notando el fondo un poco menos de desenfoque no se si me explico, no se nada de diseño web estoy empezando espero que me puedan guiar, desde ya muchas gracias

Por russka2016

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 05 May 2016 12:04 pm

mas o menos asi con esos efectos https://www.facebook.com/juegos.steam.1/photos/a.267259123473302.1073741828.267259043473310/309188285947052/?type=3&theater

Por russka2016

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 06 May 2016 05:27 pm

tomalo

Código HTML :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Page</title>
   <style>
      body{
         margin: 0;
      }

      .page{
         position: absolute;
         width: 100%;
         height: 100%;
      }

      .layer{
         position: relative;
         height: 100%;
         width: 33.3333333%;
         float: left;
      }
      
      .layer-container,
      #layer3,
      #layer2,
      #layer1{
         position: absolute;
         width: 100%;
         height: 100%;
         
      }
   
      #layer3,
      #layer2,
      #layer1{
         transition: opacity .4s;
      }

      #layer1{
         background: red  url(''); 
      }

      #layer2{
         background: blue  url(''); 
      }

      #layer3{
         background: green  url(''); 
      }
   
   </style>
</head>
<body>
   <div class="page">

      <div class="layer">
         <div id="layer1" class="bg"></div>
         <div class="layer-container">
            Layer Container 1
         </div>
      </div>
      <div class="layer">
         <div id="layer2" class="bg"></div>
         <div class="layer-container">
            Layer Container 2
         </div>
      </div>
      <div class="layer">
         <div id="layer3" class="bg"></div>
         <div class="layer-container">
            Layer Container 3
         </div>
      </div>

   </div>
   <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
   <script>
      $('.layer-container').hover(function() {
         $(this).siblings('.bg').animate({opacity: .2}, 100);
      }, function() {
         $(this).siblings('.bg').animate({opacity: 1}, 100);
      });
   </script>
</body>
</html>

Por franqgeek

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador Web

@ImFranQ

Citar

Escrito el 06 May 2016 05:29 pm

y obvio tienes que colocar la url de la imagen en el CSS para que funcione con imagen

Por franqgeek

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Desarrollador Web

@ImFranQ

[Duda] Como hacer este efecto

Escribe una respuesta rapida