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

Agregar efecto de desplazamiento de imagen en perspectiva en Weebly

4

Es posible que esté utilizando muchas imágenes en su sitio Weebly, pero desea resaltar solo las imágenes importantes para los usuarios de diferentes maneras para atraerlos. Por ejemplo, puede crear una página de portafolio de exhibición y mostrar las imágenes de su trabajo en proyectos, fotografías, videos, etc. Agregar un efecto de desplazamiento de perspectiva a dichas imágenes de portafolio capta la atención del usuario y mejora el compromiso. En este artículo, mostramos cómo agregar un efecto de desplazamiento de perspectiva a las imágenes en su sitio Weebly. A continuación se muestra un ejemplo de la imagen con efecto de desplazamiento y mueva el mouse sobre la imagen para ver el efecto de desplazamiento en perspectiva.

¿Cómo agregar efecto de desplazamiento de perspectiva a una imagen?

El proceso consta de tres sencillos pasos:

  • Subiendo una imagen a su sitio Weebly
  • Agregar código CSS
  • Agregar código HTML

Paso 1: carga de una imagen

Inicie sesión en su cuenta de Weebly, elija el sitio que desea editar y vaya a "Diseño> Editar HTML / CSS". Haga clic en el botón + disponible junto a "Activos" y luego seleccione la opción "Cargar archivo (s)". Cargue la imagen que desea agregar efecto de desplazamiento. Obtenga más información sobre la edición de CSS de origen del sitio Weebly.

Agregar efecto de desplazamiento de imagen en perspectiva en Weebly

Carga de archivo en el sitio de Weebly

La URL de la imagen cargada debe ser como – " http://yoursitename.weebly.com/files/theme/image-name.jpg ". Reemplace el sitio y el nombre de la imagen con el suyo en la URL.

Paso 2: agregar código CSS para el efecto de desplazamiento

Agregue el siguiente código CSS en la sección "Páginas> Seleccione la página> Configuración avanzada> Código de encabezado". Reemplace la URL de la imagen con la URL de su propia imagen del paso 1.

<style type="text/css"> .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"); background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} .thumb a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style>

Paso 3: agregar HTML

El paso final es agregar el siguiente código en el área de contenido dentro de un elemento "Código incrustado".

<div class="thumb"> <a href="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"> <span>KungFu Panda</span> </a> </div>

Es posible que la imagen no sea visible en el editor de Weebly, publique su sitio y coloque el mouse sobre la imagen para ver cómo se agrega el efecto de imagen en perspectiva a la imagen.

¿Busca un widget para compartir imágenes junto con un efecto de desplazamiento de perspectiva como se muestra a continuación?

Lee mas…

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