CSS Hover Effekt - Rotation

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • CSS Hover Effekt - Rotation

      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.

      PHP-Quellcode

      1. <div id="page-wrap">
      2. <section class="slide-up-boxes">
      3. <a class="shop" href="index.php/online-shops-******">
      4. <h5>Online Shop Erstellung</h5>
      5. <div>Sie möchten profitabel im Internet verkaufen? Ein optimal aufgebauter Online Shop von ****** wird Ihnen Umsatz bringen.</div>
      6. </a>
      7. </section>
      8. </div>


      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…c4d627447b148226f8c9873b8

      Das a bekommt folgende Eigenschaften:

      PHP-Quellcode

      1. .slide-up-boxes a {
      2. display: block;
      3. height: 130px;
      4. margin: 0 0 20px 0;
      5. background: rgba(215, 215, 215, 0.5);
      6. border: 1px solid #ccc;
      7. height: 65px;
      8. overflow: hidden;
      9. text-decoration: none;
      10. width: 33%;
      11. -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
      12. box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4);}
      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.

      PHP-Quellcode

      1. .slide-up-boxes h5 {
      2. color: #333;
      3. text-align: center;
      4. height: 65px;
      5. font: 18px/65px PT Sans Narrow, sans-serif;
      6. opacity: 1;
      7. -webkit-transition: all 0.2s linear;
      8. -moz-transition: all 0.2s linear;
      9. -o-transition: all 0.2s linear;
      10. margin-top: 0;}


      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

      PHP-Quellcode

      1. .slide-up-boxes a:hover h5 {margin-top: -95px; opacity: 0;}


      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

      1. .slide-up-boxes div {
      2. position: relative;
      3. color: white;
      4. font: 14px/15px Georgia, Serif;
      5. font-family: 'PT Sans Narrow', sans-serif;
      6. height: 45px;
      7. padding: 10px;
      8. opacity: 0;
      9. -webkit-transform: rotate(6deg);
      10. -webkit-transition: all 0.4s linear;
      11. -moz-transform: rotate(6deg);
      12. -moz-transition: all 0.4s linear;
      13. -o-transform: rotate(6deg);
      14. -o-transition: all 0.4s linear;
      15. -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8) inset;
      16. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8) inset;}
      20. .slide-up-boxes a:hover div {
      21. opacity: 1;
      22. -webkit-transform: rotate(0);
      23. -moz-transform: rotate(0);
      24. -o-transform: rotate(0);}
      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:

      PHP-Quellcode

      1. .slide-up-boxes a:nth-child(2) div {
      2. background: #5e5e5e url(../images/icon/blacknwhite/shopping-cart.png) 1px -2px no-repeat;
      3. padding-left: 65px;}


      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!
      Bilder

      • Unbenannt.JPG

        2,95 kB, 326×67, 202 mal angesehen

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )