TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

CSS Horizontales Flip-Image-Widget

1

Cascading Style Sheets oder CSS können leicht verwendet werden, um Bildern auf Ihrer Site attraktive Effekte hinzuzufügen. Manchmal fragen Sie sich vielleicht, wie das Spiegeln des Bildes zusammen mit der Textanzeige erfolgt. Hier ist der einfache Widget-Code zum Erstellen eines solchen Effekts mit HTML und CSS.

  • Erstellen Sie einen Bildeffekt mit einem horizontalen Spiegelungsstil.
  • Zeigen Sie ein Bild an, das beim Bewegen der Maus horizontal gespiegelt wird.
  • Bei eingeschalteter Maus wird eine Textnachricht angezeigt.
  • Das Bild wird zurückgeklappt, wenn die Maus herausgenommen wird.

Code zum Erstellen eines horizontalen Flip-Bilds mit Textanzeige

Es gibt zwei Teile, um ein solches horizontales Flip-Image-Widget zu erstellen.

  • HTML – Dieser Code muss in Ihre Webseite eingefügt werden, auf der Sie das Bild anzeigen möchten.
  • CSS – Dieser Code muss in Ihr CSS eingefügt werden. Es wird empfohlen, diesen Code in Ihr externes Stylesheet einzufügen, um die Seitenladegeschwindigkeit zu reduzieren. Sie können dies auch zusammen mit dem HTML-Code inline innerhalb einer Seite hinzufügen, was bedeutet, dass Sie den Code einfach zusammen mit dem HTML-Code auf der Seite kopieren und einfügen.

Hier ist ein HTML-Code, Sie können die Ziel-URL, das Bild und den Anzeigetext selbst ersetzen.

<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>

Hier ist ein CSS-Code, Sie können die Bildgröße, den Drehwinkel und die Hintergrundfarbe nach Ihren Wünschen anpassen:

<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>

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen