Border
Image9
Image1
Image3
Image4
Ansehliche Hover-Effekte kann man gut erzielen in dem man die Ecken entsprechend abrundet. Hier nur ein paar Beispiele, welche sich einfach anpassen lassen.
Image9
mobile_script
<style>.image9:hover {
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px 120px;
border-top-right-radius: 20px 120px;
}
.image9 {
border-top-left-radius: 20px 120px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px 120px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
</style>Inhaltsbereich
ZB. ein Bild per Textabsatz einbinden und anschließend auf (HTML-Quellcode umschalten). Den Abschnitt class="singleImage" durch class="image9" ersetzen.
Oder ein Bild per Widget Quelltext nach folgendem Schema einfügen:
<a href="https://www.zeta-producer.com/"><img class="image9" border="0" alt="" src="http://foto.zella.de/media/images/global.jpg" /></a>Image1
mobile_script
<style>.image1:hover {
border-radius:20px;
box-shadow: 0 10px 6px -6px grey;
}
.image1 {
border-radius:5px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
</style>Inhaltsbereich
ZB. ein Bild per Textabsatz einbinden und anschließend auf (HTML-Quellcode umschalten). Den Abschnitt class="singleImage" durch class="image1" ersetzen.
Oder ein Bild per Widget Quelltext nach folgendem Schema einfügen:
<a href="https://www.zeta-producer.com/"><img class="image1" border="0" alt="" src="http://foto.zella.de/media/images/06.jpg" /></a>Image3
mobile_script
<style>.image3:hover {
border-top-left-radius: 120px;
border-bottom-right-radius: 120px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.image3 {
border-bottom-left-radius: 120px;
border-top-right-radius: 120px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>Inhaltsbereich
ZB. ein Bild per Textabsatz einbinden und anschließend auf (HTML-Quellcode umschalten). Den Abschnitt class="singleImage" durch class="image3" ersetzen.
Oder ein Bild per Widget Quelltext nach folgendem Schema einfügen:
<a href="https://www.zeta-producer.com/"><img class="image3" border="0" alt="" src="http://foto.zella.de/media/images/ausritt.jpg" /></a>Image4
mobile_script
<style>.image4:hover {
-webkit-box-shadow: 0px 0px 15px 15px #fff;
box-shadow: 0px 0px 15px 15px #fff;
border-radius:50%;
opacity: 0.6;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
.image4 {
opacity: 1;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>Inhaltsbereich
ZB. ein Bild per Textabsatz einbinden und anschließend auf (HTML-Quellcode umschalten). Den Abschnitt class="singleImage" durch class="image4" ersetzen.
Oder ein Bild per Widget Quelltext nach folgendem Schema einfügen:
<a href="https://www.zeta-producer.com/"><img class="image4" border="0" alt="" src="http://deinbild.jpg" /></a>mobile_script einfügen:
Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok