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.


support
Dutch English French German

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