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

11 CSS-Bild-Hover-Effekte für Weebly

2

In unserem vorherigen Artikel haben wir gesehen, wie Sie Bild-Overlays beim Schweben erstellen und in diesem Artikel werden wir uns ansehen, wie Sie einfache Bild-Hover-Effekte für Ihre Weebly-Site erstellen. CSS-Eigenschaften Übergang, Transformation, Filterung und Deckkraft werden verwendet, um einen Schwebeeffekt für die Bilder auf der Weebly-Site zu erzeugen. Sie können entweder den vollständigen Widget-Code in das Element „Embed Code” kopieren / einfügen oder den CSS- Stil im Abschnitt „Header Code” und den HTML-Code im Element „ Embed Code ” auf der Seite hinzufügen.

CSS-Bild-Hover-Effekte für Weebly

Es gibt 11 verschiedene Effekte zur Steuerung – Verkleinern, Vergrößern, Vergrößern, Verkleinern, Sättigen, Kontrast, Helligkeit, Graustufen, Unschärfe, Farben invertieren und Deckkraft. Der vollständige CSS- und HTML-Code zusammen mit einer Demo für jeden Stil wird unten angezeigt.

  • Stellen Sie sicher, dass Sie die Image-URL durch Ihre eigene Image-URL ersetzen. Sie können entweder Bilder im Abschnitt „Assets” hochladen oder URLs von verschiedenen Seiten Ihrer Weebly-Site verwenden oder URLs von einer anderen Site verwenden.
  • Sie können die Werte von Skalierung, Graustufen, Helligkeit, Kontrast usw. mit Ihren eigenen Werten ändern. Beispiel: „-webkit-filter: Helligkeit(0.25);” reduziert die Helligkeit auf 25%, die Sie in "-webkit-filter: Helligkeit(1.25);" ändern können. um die Helligkeit auf 125% zu erhöhen.
  • Die Filtereigenschaft wird in Internet Explorer nicht unterstützt.

Hier ist ein vollständiger Code für jede Art von Bild-Schwebeeffekt. Sie können die Vorschau anzeigen, indem Sie mit der Maus über das Bild fahren.

1 Vergrößern Sie das Bild beim Schweben

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Bild beim Schweben verkleinern

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Vergrößern des Bildes beim Schweben

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Bildgröße beim Schweben verkleinern

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Sättigung der Bildfarben beim Hover ändern

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Bild beim Hover in Graustufen umwandeln

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Kontrast bei Bild-Hover ändern

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Helligkeit bei Bild-Hover ändern

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Ändern Sie die Unschärfe des Bildes beim Hover

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 Bildfarben beim Hover umkehren

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Deckkraftfarben beim Hover ändern

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Da all diese Effekte mit generischem CSS erstellt werden, können Sie diese Codes auf jeder HTML-Seite verwenden. Dies ist zum Beispiel eine WordPress-Site und wir haben den " Custom HTML "-Block in WordPress verwendet, um alle CSS-Bild-Overlay-Effekte zu präsentieren.

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