TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Widżet CSS w poziomie odwracania obrazu

1

Kaskadowe arkusze stylów lub CSS można łatwo wykorzystać do dodania atrakcyjnych efektów do obrazów w witrynie. Czasami możesz się zastanawiać, jak odbywa się odwracanie obrazu wraz z wyświetlaniem tekstu. Oto prosty kod widgetu do tworzenia takiego efektu za pomocą HTML i CSS.

  • Stwórz efekt obrazu z poziomym stylem odwracania.
  • Wyświetl obraz, który obraca się w poziomie, gdy przesuwa się mysz.
  • Gdy mysz jest włączona, wyświetlana jest wiadomość tekstowa.
  • Obraz odwróci się po wyjęciu myszy.

Kod do tworzenia poziomego obrazu odwracania z wyświetlaniem tekstu

Istnieją dwie części do stworzenia takiego poziomego widżetu z odwracaniem obrazu.

  • HTML – Ten kod należy dodać na stronie internetowej, na której chcesz wyświetlić obraz.
  • CSS – Ten kod należy dodać do Twojego CSS. Zaleca się dodanie tego kodu do zewnętrznego arkusza stylów, aby zmniejszyć szybkość ładowania strony. Możesz również dodać to wraz z kodem HTML w treści strony, co oznacza, że ​​po prostu skopiuj i wklej kod wraz z kodem HTML na stronie.

Oto kod HTML, możesz samodzielnie zastąpić docelowy adres URL, obraz i wyświetlany tekst.

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

Oto kod CSS, możesz dostosować rozmiar obrazu, kąt obrotu i kolor tła zgodnie z potrzebami:

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

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów