TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Віджет горизонтального перевертання зображення CSS

0

Каскадні таблиці стилів або CSS можна легко використовувати для додавання привабливих ефектів до зображень на вашому сайті. Іноді вам може бути цікаво, як відбувається перевертання зображення разом із текстовим дисплеєм. Ось простий код віджета для створення такого ефекту за допомогою HTML та CSS.

  • Створіть ефект зображення за допомогою стилю горизонтального перегортання.
  • Відображення зображення, яке перевертається горизонтально при переведенні миші.
  • Коли миша увімкнена, відображається текстове повідомлення.
  • Зображення повернеться, коли мишку виймуть.

Код для створення горизонтального перевернутого зображення з текстовим дисплеєм

Існує дві частини для створення такого віджета горизонтального перевертання зображення.

  • HTML – Цей код потрібно додати на свою веб -сторінку, де потрібно відобразити зображення.
  • CSS – Цей код потрібно додати до вашого CSS. Рекомендується додати цей код у зовнішню таблицю стилів, щоб зменшити швидкість завантаження сторінки. Ви також можете додати це разом із вбудованим кодом HTML на сторінці, що означає просто скопіювати та вставити код разом із кодом HTML на сторінці.

Ось HTML -код, ви можете самостійно замінити цільову URL -адресу, зображення та відображуваний текст.

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

Ось код CSS, ви можете налаштувати розмір зображення, кут повороту та колір фону відповідно до ваших потреб:

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

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі