3 interessante und coole CSS3 Image Hover-Effekte

3 cool and beautiful CSS3 image hover effects

Image may be NSFW.
Clik here to view.

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.

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.

• Image may be NSFW.
  Clik here to view.

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.

• Image may be NSFW.
  Clik here to view.

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:

• Image may be NSFW.
  Clik here to view.

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!