CSS3-Tricks: Zoom-Ins-Bild Hover-Effekt mit Single-Icons

#002 A simple image zoom hover effect with a single icon

002-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!

Als besonderen Service sehen Sie hier in meinem Artikel für das jeweilige CSS3-Snippet eine kurze GIF-Datei 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.

#002 – A simple image zoom hover effect with a single icon

ezgif.com-resize

Originalartikel auf CodePen.io ansehen

HTML:

    
sample4
sample5
sample6

CSS:

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0002 {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  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.snip0002 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0002 img {
  max-width: 100%;
  opacity: 1.0;
  -webkit-transition: opacity 0.35s, scale(1);
  transition: opacity 0.35s, scale(1);
  -webkit-transition: .3s linear;
  transition: .3s linear;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.snip0002 > div a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  color: #ffffff;
}
figure.snip0002 > 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.snip0002 > div::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 30px #222222;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale3d(1.5, 1.5, 1);
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.snip0002:hover img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.3;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0002:hover > div i {
  opacity: 0.8;
  top: 50%;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.snip0002:hover > div::before {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

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+1Share on Facebook0Email this to someone

Schreib einen Kommentar

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