Code-Snippet-Blog
zum experimentieren, kopieren und archivieren!
Vorschau
Bilder
→
Bildinfo »FadeIn«
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
CSS
figure { display: block; position: relative; width: 570px; height: 250px; background: #FFF; float: left; margin: 0; } figure img { width: 300px; height: 213px; float: left; } figcaption { font: normal 11px/14px Helvetica, Arial, sans-serif; position: relative; float: left; color: #666; margin-left: 20px; opacity: 0; width: 250px; visibility: hidden; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } figure:hover figcaption { opacity: 1; visibility: visible; -webkit-animation: cssAnimation 0.4s 1 ease-in; -moz-animation: cssAnimation 0.4s 1 ease-in; -o-animation: cssAnimation 0.4s 1 ease-in; } @-webkit-keyframes cssAnimation { from { -webkit-transform: translate(-10px); } to { -webkit-transform: translate(2px); } } @-moz-keyframes cssAnimation { from { -moz-transform: translate(-10px); } to { -moz-transform: translate(2px); } } @-o-keyframes cssAnimation { from { -o-transform: translate(-10px); } to { -o-transform: translate(2px); } }
Notizen
Weitere Infos zum HTML5-Element <figure> findest du z. B.
hier
.
hide
Basics
clearfix hack
float & clear
position absolute
position fixed
position relative
standard Elemente
Bilder
Bild tauschen
Bildinfo »FadeIn«
Bildinfo »SlideIn«
Einfärben
Effekte
Fixed-Corner
Scrollbar
Text Blur
Experimente
Cinematic GIF
Text-Image
Inhalt
Accordion
Artikel
JavaScript
Drag & Drop
Navigation
Breadcrumb
Buttons hor.
CSS-Table hor.
Links hor.
Links hor. 02
Links vert.
Pagination
Responsive
Tabs hor.
Raster
Raster 960 / 6
Responsive 12er
Retina ready
SVG Grafik
Tabellen
Datentabelle
Typo
Webfonts verwenden