3 einfache und coole CSS3 Hover-Effekte für Grafiken

Wie Sie mit CSS3 interessante Mouse-Over-Effekte für Grafiken erstellen

3 cool CSS3 image hover effects

Bei den heutigen modernen Webseiten und Browsern gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu erstellen. Die einfachste und eleganteste sind in der Regel CSS und insbesondere die Ergänzungen, die mit CSS3 kamen.

Heute möchte ich Ihnen zeigen, wie Sie mit dem Einsatz von Hover (:hover) und Übergängen (transitions) richtig schöne und coole CSS3-Effekte zum Ein- und Ausblenden von Bildern und Bildunterschriften erstellen können.

Demo 1

Demo1
CSS3 Hover-Effect #1 ansehen!

Die erste Demo ist die einfachste. Die Grafik wird nach dem Überfahren mit der Maus nach rechts oben (flyout) ausgeblendet.

HTML

  • This is a cool title!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.

CSS

.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

Demo 2

Demo2
CSS3 Hover-Effect #2 ansehen!

Im 2. Beispiel bewegt sich die Grafik nach dem Überfahren mit der Maus nach unten und gibt im oberen Bereich die Bildunterschrift frei.

HTML

  • This is a cool title!

    Lorem ipsum dolor sit amet.

CSS

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

Demo 3

Demo3
CSS3 Hover-Effect #3 ansehen!

Beispiel #3 zeigt den sogenannten Flipping-Card-Effekt. Dabei wird die Grafik umgedreht und auf der Rückseite erscheint die Bildunterschrift.

HTML

  • This is a cool title!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.

CSS

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}
Wichtig für Browserverwendung und Mobilversionen!
Unnötig zu sagen, dass die CSS3-Tooltipps nur in den modernsten und gängigsten Browsern funktionieren, welche Pseudo-Elemente, Hover-Effekte und CSS-Übergänge unterstützen.
In den Mobilversionen (Smartphone, Tablets) werden die Mouse-Over-Effekte, die CSS-Transitions und die Pseudo-Elemente :before und :after teilweise fehlerhaft bis gar nicht dargestellt!
Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

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