Hover-Effekte Kombiniert
Image 1
Image2
Image 3
Hier findet ihr ein paar Beispiele wie man einzelne Hover-Effekte kombinieren kann.
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
<style>
.image1:hover {
opacity: 1.0;
border-radius:50%;
}
.image1 {
opacity: .5;
border-radius:40px;
-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="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://www.deineseite.de/images/bild.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
<style>
.image2:hover {
opacity: .7;
border-radius:40px;
}
.image2 {
opacity: 1.0;
border-radius:10px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
Inhaltsbereich
ZB. ein Bild per Textabsatz einbinden und anschließend auf (HTML-Quellcode umschalten). Den Abschnitt class="singleImage" durch class="image2" ersetzen.
Oder ein Bild per Widget Quelltext nach folgendem Schema einfügen:
<a href="https://www.zeta-producer.com/"><img class="image2" border="0" alt="" src="http://www.deineseite.de/images/bild.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
<style>
.image3 {
opacity: 1.0;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
opacity: .5;
transform: scale(.9, .9);
}
</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://www.deineseite.de/images/bild.jpg" /></a>