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

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

4

Каскадные таблицы стилей или 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
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее