Hallo,
ich sitze gerade auf der Arbeit an einer Homepage und habe mal ein bisschen nach Hover Effekte gesucht. Dabei bin ich auf einen wirklich schönen Effekt gestoßen den ich euch hier zeigen möchte. :)
Das ganze ist so aufgebaut:
Man hat eine "Box" auf seiner Homepage, wenn man mit der Maus drüber fährt, schiebt sich von unten eine andere Oberfläche mit einem Text, Bild, o.ä. hinein.
Ich weiß das es nicht gerade die sauberste Methode ist und die Technik nicht ganz ordentlich ist aber in Browsern wie Firefox, Safari, Chrome und Opera wird sie gut angezeigt.
Der HTML Code ist so aufgebaut:
Ich mache es anhand des Beispiels welches ich gerade verwende.
So,
wir haben ein <div> welches vier weitere Elemente beinhaltet: <section> <a> <h5> & noch ein <div>.
Das ganze wird noch mit den gleich gezeigten CSS-Code's so aussehen:
mmo-core.de/attachment/3289/?s…2fbe0a1d749876a4812eece05
Das a bekommt folgende Eigenschaften:
Alles anzeigen
So, damit haben wir dem ganzen eine height gegeben, eine width und noch ein bisschen an der Optik gefeilt.
Kommen wir zu dem Text-Element <h5>. Dies ist der große Text im Vordergrund, in meinem Beispiel wäre es Online Shop Erstellung.
Wir haben ihn nun ein wenig gestaltet mit font, color & opacity.
Diese Befehle:
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
Sind alle für unterschiedliche Browser, bewirken aber alle das gleiche. Der Content der Box verschiebt sich ein bisschen, welches am Ende einen guten Effekt bringt.
Machen wir weiter mit dem hover Effekt von dem ganzen <a>. Angesprochen wird das so:
.slide-up-boxes a:hover
Wir fügen aber noch das <h5> Element dazu, also sprechen wir es in CSS so an:
.slide-up-boxes a:hover h5
Durch das margin-top: -95px;, verschiebt sich das ganze aus dem Element raus und dadurch das wir <a> ein overflow: hidden; gegeben haben. Ist es dannach nicht mehr sichtbar.
Jetzt bekommt das <div>, welches sich in <div id="page-wrap"></div> befindet eine Rotation, dies machen wir mit CSS.
Alles anzeigen
Dadurch wird das <div> sozusagen, hochgezogen und schiebt das andere wieder raus. Ziemlich schwammig beschrieben aber so ist es, ziemlich grob gesagt. :D
Wenn man jetzt noch möchte, dass im linken bereich des hochgeschobenen ein kleines Bild mit hochgeschoben wir, gibt es dazu auch einen CSS-Befehl:
Die background-color sowie Bild etc. könnt ihr euren Ansprüchen dementsprechend anpassen.
Ich hoffe ich konnte einigen hiermit etwas neues zeigen und eventuell helfen.
Ich weiß meine Beschreibung ist noch relative schwammig und könnte besser sein, ja! :D
Gebt mir Feedback, damit ich mich verbessern kann. Sollte etwas unklar sein: Nachfragen!
ich sitze gerade auf der Arbeit an einer Homepage und habe mal ein bisschen nach Hover Effekte gesucht. Dabei bin ich auf einen wirklich schönen Effekt gestoßen den ich euch hier zeigen möchte. :)
Das ganze ist so aufgebaut:
Man hat eine "Box" auf seiner Homepage, wenn man mit der Maus drüber fährt, schiebt sich von unten eine andere Oberfläche mit einem Text, Bild, o.ä. hinein.
Ich weiß das es nicht gerade die sauberste Methode ist und die Technik nicht ganz ordentlich ist aber in Browsern wie Firefox, Safari, Chrome und Opera wird sie gut angezeigt.
Der HTML Code ist so aufgebaut:
Ich mache es anhand des Beispiels welches ich gerade verwende.
PHP-Quellcode
So,
wir haben ein <div> welches vier weitere Elemente beinhaltet: <section> <a> <h5> & noch ein <div>.
Das ganze wird noch mit den gleich gezeigten CSS-Code's so aussehen:
mmo-core.de/attachment/3289/?s…2fbe0a1d749876a4812eece05
Das a bekommt folgende Eigenschaften:
PHP-Quellcode
- .slide-up-boxes a {
- display: block;
- height: 130px;
- margin: 0 0 20px 0;
- background: rgba(215, 215, 215, 0.5);
- border: 1px solid #ccc;
- height: 65px;
- overflow: hidden;
- text-decoration: none;
- width: 33%;
- -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
- box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4);}
So, damit haben wir dem ganzen eine height gegeben, eine width und noch ein bisschen an der Optik gefeilt.
Kommen wir zu dem Text-Element <h5>. Dies ist der große Text im Vordergrund, in meinem Beispiel wäre es Online Shop Erstellung.
Wir haben ihn nun ein wenig gestaltet mit font, color & opacity.
Diese Befehle:
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
Sind alle für unterschiedliche Browser, bewirken aber alle das gleiche. Der Content der Box verschiebt sich ein bisschen, welches am Ende einen guten Effekt bringt.
Machen wir weiter mit dem hover Effekt von dem ganzen <a>. Angesprochen wird das so:
.slide-up-boxes a:hover
Wir fügen aber noch das <h5> Element dazu, also sprechen wir es in CSS so an:
.slide-up-boxes a:hover h5
Durch das margin-top: -95px;, verschiebt sich das ganze aus dem Element raus und dadurch das wir <a> ein overflow: hidden; gegeben haben. Ist es dannach nicht mehr sichtbar.
Jetzt bekommt das <div>, welches sich in <div id="page-wrap"></div> befindet eine Rotation, dies machen wir mit CSS.
PHP-Quellcode
- .slide-up-boxes div {
- position: relative;
- color: white;
- font: 14px/15px Georgia, Serif;
- font-family: 'PT Sans Narrow', sans-serif;
- height: 45px;
- padding: 10px;
- opacity: 0;
- -webkit-transform: rotate(6deg);
- -webkit-transition: all 0.4s linear;
- -moz-transform: rotate(6deg);
- -moz-transition: all 0.4s linear;
- -o-transform: rotate(6deg);
- -o-transition: all 0.4s linear;
- -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8) inset;
- box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8) inset;}
- .slide-up-boxes a:hover div {
- opacity: 1;
- -webkit-transform: rotate(0);
- -moz-transform: rotate(0);
- -o-transform: rotate(0);}
Dadurch wird das <div> sozusagen, hochgezogen und schiebt das andere wieder raus. Ziemlich schwammig beschrieben aber so ist es, ziemlich grob gesagt. :D
Wenn man jetzt noch möchte, dass im linken bereich des hochgeschobenen ein kleines Bild mit hochgeschoben wir, gibt es dazu auch einen CSS-Befehl:
Die background-color sowie Bild etc. könnt ihr euren Ansprüchen dementsprechend anpassen.
Ich hoffe ich konnte einigen hiermit etwas neues zeigen und eventuell helfen.
Ich weiß meine Beschreibung ist noch relative schwammig und könnte besser sein, ja! :D
Gebt mir Feedback, damit ich mich verbessern kann. Sollte etwas unklar sein: Nachfragen!