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

Widget de imagen de volteo horizontal CSS

1

Las hojas de estilo en cascada o CSS se pueden usar fácilmente para agregar efectos atractivos a las imágenes de su sitio. En ocasiones, es posible que se pregunte cómo se realiza el cambio de imagen junto con la visualización del texto. Aquí está el código de widget simple para crear tal efecto usando HTML y CSS.

  • Crea un efecto de imagen con un estilo de volteo horizontal.
  • Muestra una imagen que se voltea horizontalmente cuando se mueve el mouse.
  • Se muestra un mensaje de texto cuando el mouse está encendido.
  • La imagen se volteará hacia atrás cuando se saque el mouse.

Código para crear una imagen de volteo horizontal con visualización de texto

Hay dos partes para crear un widget de imagen de volteo horizontal.

  • HTML: este código se debe agregar en su página web donde desea mostrar la imagen.
  • CSS: este código se debe agregar en su CSS. Se recomienda agregar este código en su hoja de estilo externa para reducir la velocidad de carga de la página. También puede agregar esto junto con el código HTML en línea dentro de una página, lo que significa simplemente copiar y pegar el código junto con el código HTML en la página.

Aquí hay un código HTML, puede reemplazar la URL de destino, la imagen y el texto para mostrar por su cuenta.

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <a href=https://www.webnots.com/step-by-step-seo-tutorial/search-engine-optimization-guide/><Img data-src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88474-613212da8701a.png"> </div> <div class="backside"><br> <p align=justify> <font face=arial size=5 color=brown>Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...</font> </p></a> </div> </div> </div>

Aquí hay un código CSS, puede personalizar el tamaño de la imagen, el ángulo de rotación y el color de fondo según sus necesidades:

<style type="text/css"> /* Start: Suport for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* End: Support for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip, .frontside, .backside { width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background: grey; z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } </style>

Fuente de grabación: webnots.com

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