5 beeindruckende und schicke Hover-Effekte mit CSS3

Wie Sie mit CSS3 coole Hover-Effekte erstellen können

5 CSS3 Hover Effekte

Basierend auf meinem Blogartikel 10 tolle Hover-Effekte mit CSS3 Transitions vom 8. Juli 2013 möchte ich Ihnen in meinem heutigen Beitrag 5 weitere interessante und tolle CSS3 Hover-Effekte vorstellen.

Das Original-Tutorial für diese CSS3-Tricks heißt CSS3 Hover Effects und stammt ursprünglich vom italienischen Designer Allesio Atzeni.

5 fertige CSS3 Hover-Effekte herunterladen (Zip-Datei: 216 KB):
5 CSS3 Hover-Effects – Download

Beispiel 1

CSS3 Hover Effect 1
[CSS3 Hover-Effekt 1 ansehen: Grafik anklicken (öffnet in neuem Fenster!)]

HTML-Markup

<div class="view effect">  
  <img src="images/1.jpg" />  
  <div class="mask"></div>  
  <div class="content">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>

CSS-Anweisungen

.effect img {
   opacity:1;
   transform:scale(1,1);
   transition: all 0.2s ease-in;
}
.effect .mask {
   opacity:0;
   overflow:visible;
   border-color:rgba(0,0,0,0.7) transparent transparent transparent;
   border-style:solid;
   border-width:150px;
   width:0;
   height:0;
   transform:translateY(-125px);
   transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
   opacity:0;
   transform:translateY(-125px);
   transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
   opacity:0.7;
   transform:scale(2,2);
}
.effect:hover .mask {
   opacity: 1;
   transform: translateY(0px);
}
.effect:hover a.info {
   opacity:1;
   transform:translateY(100px);
}

Beispiel 2

CSS3 Hover Effect 2
[CSS3 Hover-Effekt 2 ansehen: Grafik anklicken (öffnet in neuem Fenster!)]

HTML-Markup

<div class="view second-effect">  
  <img src="images/2.jpg" />  
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>

CSS-Anweisungen

.second-effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}

Beispiel 3

CSS3 Hover Effect 3
[CSS3 Hover-Effekt 3 ansehen: Grafik anklicken (öffnet in neuem Fenster!)]

HTML-Markup

<div class="view third-effect">  
  <img src="images/3.jpg" />  
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>

CSS-Anweisungen

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.third-effect a.info {
   position:relative;
   top:-10px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

Beispiel 4

CSS3 Hover Effect 4
[CSS3 Hover-Effekt 4 ansehen: Grafik anklicken (öffnet in neuem Fenster!)]

HTML-Markup

<div class="view fourth-effect">  
  <a href="#" title="Full Image"><img src="images/4.jpg" /></a>  
  <div class="mask"></div>  
</div>

CSS-Anweisungen

.fourth-effect .mask {
   position:absolute; /* Center the mask */
   top:50px;
   left:100px;
   cursor:pointer;
   border-radius: 50px;
   border-width: 50px;
   display: inline-block;
   height: 100px;
   width: 100px;
   border: 50px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:1;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

Beispiel 5

CSS3 Hover Effect 5
[CSS3 Hover-Effekt 4 ansehen: Grafik anklicken (öffnet in neuem Fenster!)]

HTML-Markup

<div class="view fifth-effect">  
  <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  
  <div class="mask"></div>  
</div>

CSS-Anweisungen

.fifth-effect img {
   opacity:0.2;
   transition: all 0.3s ease-in;
}
.fifth-effect .mask {
   cursor:pointer;
   opacity:1;
   visibility:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
   border:0px double rgba(0,0,0,0.7);
   opacity:0;
   visibility:hidden;
}
.fifth-effect:hover img {
   opacity:1;
}

Ich hoffe, Ihnen gefallen diese CSS3-Experimente. Vielleicht dienen sie Ihnen auch als Inspiration für Ihre eigenen Webprojekte.

5 fertige CSS3 Hover-Effekte herunterladen (Zip-Datei: 216 KB):
5 CSS3 Hover-Effects – Download

Original-Tutorial ansehen:
CSS3 Hover Effects, November 14, 2011

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *