TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

11 efectos de desplazamiento de imagen CSS para Weebly

5

En nuestro artículo anterior, vimos cómo crear superposiciones de imágenes al pasar el mouse y, en este artículo, veremos cómo crear efectos simples de imágenes flotantes para su sitio Weebly. Las propiedades CSS de transición, transformación, filtrado y opacidad se utilizan para crear un efecto flotante para las imágenes en el sitio de Weebly. Puede copiar / pegar el código completo del widget dentro del elemento "Código incrustado" o agregar el estilo CSS en la sección "Código de encabezado" y el código HTML dentro del elemento " Código incrustado " en la página.

Efectos de desplazamiento de imágenes CSS para Weebly

Hay 11 efectos diferentes para controlar: alejar, acercar, agrandar, encoger, saturar, contraste, brillo, escala de grises, desenfoque, invertir colores y opacidad. El código CSS y HTML completo junto con la demostración para cada estilo se muestra a continuación.

  • Asegúrese de reemplazar la URL de la imagen con la URL de su propia imagen. Puede cargar imágenes en la sección "Activos" o usar URL de diferentes páginas en su sitio Weebly o usar URL de otro sitio.
  • Puede cambiar los valores de escala, escala de grises, brillo, contraste, etc. con sus propios valores. Por ejemplo, "-webkit-filter: brillo (0,25);" reducirá el brillo al 25%, que puede cambiar a "-webkit-filter: brillo (1.25);" para aumentar el brillo al 125%.
  • La propiedad de filtro no es compatible con Internet Explorer.

Aquí hay un código completo para cada tipo de efecto de desplazamiento de imagen. Puede ver la vista previa colocando el mouse sobre la imagen.

1 Acercar la imagen al pasar el mouse

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Alejar la imagen al pasar el mouse

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Aumentar el tamaño de la imagen al pasar el mouse

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Reducir el tamaño de la imagen al pasar el mouse

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Cambiar la saturación de los colores de la imagen al pasar el mouse

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Convertir imagen a escala de grises al pasar el mouse

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Cambiar el contraste al desplazar la imagen

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Cambiar el brillo al desplazar la imagen

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Cambiar el desenfoque de la imagen al pasar el mouse

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 colores de imagen invertidos al pasar el mouse

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Cambie los colores de opacidad al pasar el mouse

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Dado que todos estos efectos se crean con CSS genérico, puede utilizar estos códigos en cualquier página HTML. Por ejemplo, este es un sitio de WordPress y hemos utilizado el bloque " HTML personalizado " en WordPress para mostrar todos los efectos de superposición de imágenes CSS.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More