CSS3-Tricks: Image-Hover-Effekt mit Icon-Fade-In

#001 – Einfacher Fade-In-Effekt mit Grafik-Hover

demo-screen

Ich zeige Ihnen hier in meiner neuen Artikelreihe in regelmäßigen Abständen coole, interessante und moderne CSS3-Code-Snippets. Alle Beispiele stammen von LittleSnippets.net, wo sie aber nur angesehen werden können.

Wollen Sie den Code/das Beispiel herunterladen bzw. das Snippet teilen, klicken Sie zuerst auf den codepen.io-button Button!

Sie gelangen dann auf die eigentliche CODEPEN-Beispiel-Seite. Erst hier gibt’s den kompletten Beispiel-Code zum Ansehen, Herunterladen bzw. zum Teilen mit Twitter, Facebook oder Google+.

Die Buttons dafür finden Sie ganz rechts unten im jeweiligen Musterbeispiel!

export-button | share-button

Als besonderen Service sehen Sie hier in meinem Artikel für das jeweilige CSS3-Snippet eine kurze Video-Demo und den kompletten HTML-Code und die entsprechenden CSS-Anweisungen. Zusätzlich gibt’s für Sie die Möglichkeit, das gesamte Beispiel als ZIP-Datei auch hier bei mir am Ende des Artikels herunterzuladen.

#001 – Simple image hover effect with a single icon fade in.

ezgif.com-resize

Originalartikel auf CodePen.io ansehen

HTML:

sample1
sample2
sample3

CSS:

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0001 {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  border: 4px solid #222222;
  width: 100%;
  background: #222222;
  text-align: center;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0001 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0001 img {
  max-width: 100%;
  opacity: 1.0;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s linear;
  transition: .3s linear;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.snip0001 > div a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  color: #ffffff;
}
figure.snip0001 > div a i {
  display: inline-block;
  font-size: 58px;
  opacity: 0;
  top: 55%;
  position: relative;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0001:hover img {
  opacity: 0.3;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0001:hover > div i {
  opacity: 0.8;
  top: 50%;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

INFOS ZUR SAMMLUNG

LittleSnippets.net ist ein rasant wachsender und hochinteressanter CSS3/ HTML-Blog, welcher eine tolle Sammlung von Code-Beispielen für CSS3, HTML und HTML5 zum kostenlosen Download anbietet.

Um Sie über neue Einträge auf dem Laufenden zu halten, empfehle ich Ihnen, dem Blog auf Facebook und auf Twitter zu folgen.

Download Codepen-Snippet

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

Schreib einen Kommentar

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