3 interessante und coole CSS3 Image Hover-Effekte

3 cool and beautiful CSS3 image hover effects

screenshot-3-hover-effects

Auf den modernen Webseiten gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu schaffen. Die einfachsten und elegantesten wurden in der Regel mit CSS realisiert – und insbesondere durch die Ergänzungen, welche mit CSS3 aufkamen.

In den „alten Tagen des Internets“ mussten die Webdesigner (und solche, die sich dafür hielten) JavaScript anwenden, um bestimmte Effekte oder Wirkungen zu erzielen. Dank der ständig wachsenden Unterstützung für CSS3 in allen Browsern ist es nun möglich, die 3 von mir unten weiter angeführten Hover-Effekte recht einfach und rasch einzurichten.

Achtung!
Ich möchte Sie darauf aufmerksam machen, dass diese 3 Beispiele nur in den neuesten und aktuellsten Browsern funktionieren. In den Mobilversionen (Smartphone, Tablet usw.) werden die Hover-Effekte bzw. Animationen möglicherweise fehlerhaft bis gar nicht dargestellt!

3 coole Mouseover-Effekte bei Bildern – 3 Image Hover Effects

Heute zeige ich Ihnen anhand von 3 interessanten Hover-Effekten, wie Sie Beschriftungen oder Links hinter Bildern verbergen können.

Die Original-Demos habe ich im Artikel 3 cool CSS3 image hover effects auf der Webseite von Webdesigner Depot gefunden.

Dort können Sie im Original-Artikel auch die genauen Beschreibungen und Anleitungen für die Erstellung des HTML-Codes und der CSS3-Anweisungen nachlesen.

Demo 1:

Die erste Demo ist unsere einfachste: Das Bild fliegt nach rechts weg, um die Beschriftung zu zeigen.

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:

Bei Demo 2 bewegt sich das Bild nach unten weg.

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:

Die 3. Demo zeigt, wie sich das Foto umdreht und so der Text sichtbar wird.

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)
} 

Download: 3 Musterbeispiele hier herunterladen!

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 *