Hover-Effekte Kombiniert

Image 1

Image2

Image 3

Hier findet ihr ein paar Beispiele wie man einzelne Hover-Effekte kombinieren kann.


Image 1

NACH OBEN

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>

support
Dutch English French German

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="http://www.zeta-producer.com/"><img class="image1" border="0" alt=""  src="http://www.deineseite.de/images/bild.jpg" /></a>

Image 2

NACH OBEN

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="http://www.zeta-producer.com/"><img class="image2" border="0" alt=""  src="http://www.deineseite.de/images/bild.jpg" /></a>

Image3

NACH OBEN

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="http://www.zeta-producer.com/"><img class="image3" border="0" alt=""  src="http://www.deineseite.de/images/bild.jpg" /></a>

nach oben