dgmid · December 16, 2011 16:32 · Dec 29, 2011 · Dec 20, 2011 · Dec 17, 2011 · Dec 16, 2011
diff --git a/dabblet.css b/dabblet.css
@@ -54,7 +54,7 @@ figcaption {
 
 	box-shadow: #fff8cf 0 0 15px;
 
-	-transform: scale(4,1);
+	transform: scale(4,1);
 
 	transition: all .5s;
 }

diff --git a/dabblet.css b/dabblet.css
@@ -51,28 +51,18 @@ figcaption {
 	white-space: nowrap;
 	font-size: 20px;
 	opacity: 0;
-
-	-webkit-box-shadow: #fff8cf 0 0 15px;
+
 	box-shadow: #fff8cf 0 0 15px;
 
-	-moz-transform: scale(4,1);
-	-webkit-transform: scale(4,1);
-	-o-transform: scale(4,1);
 	-transform: scale(4,1);
-
-	-moz-transition: all .5s;
-	-webkit-transition: all .5s;
-	-o-transition: all .5s;
+
 	transition: all .5s;
 }
 
 figure:hover figcaption {
 	opacity: 1;
 	left: -250px;
-
-	-moz-transform: scale(1,1);
-	-webkit-transform: scale(1,1);
-	-o-transform: scale(1,1);
+
 	transform: scale(1,1);
 }
 

diff --git a/dabblet.html b/dabblet.html
@@ -7,4 +7,4 @@
 
 	<p>you can find more examples here:<br />
 	<a href="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/" target="_blank">css3 animated image captions</a></p>
-</body>
+</body>
diff --git a/settings.json b/settings.json
@@ -1 +1 @@
-{"page":"css","view":"split-vertical"}
+{"view":"split-vertical","prefixfree":"1","page":"css"}
diff --git a/dabblet.html b/dabblet.html
@@ -6,5 +6,5 @@
 	</figure>
 
 	<p>you can find more examples here:<br />
-	<a href="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/">css3 animated image captions</a></p>
+	<a href="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/" target="_blank">css3 animated image captions</a></p>
 </body>
diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,79 @@
+/**
+ * Animated HTML5 / CSS3 image caption - Example 5
+ */
+
+/* page styles */
+
+body{
+	background: #fff;
+	min-height:100%;
+}
+
+p {
+	width: 300px;
+	margin: 0 auto;
+	text-align: center;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+a:link, a:visited {
+	color: #999;
+	text-decoration: none;
+
+}
+
+a:hover, a:active {
+	color: #0080ff;
+}
+
+/* image caption styles */
+
+figure {
+	margin: 100px auto;
+	width: 200px;
+	height: 200px;
+	overflow: hidden;
+	position: relative;
+}
+
+figcaption {
+	position: absolute;
+	text-align: center;
+	color: rgba(255,255,255,1);
+	background-color: rgba(50,27,3,0.8);
+	border: 4px solid rgba(122,92,37,0.8);
+	display: block;
+	width: 700px;
+	line-height: 50px;
+	position: absolute;
+	top: 75px;
+	left: 50px;
+	white-space: nowrap;
+	font-size: 20px;
+	opacity: 0;
+
+	-webkit-box-shadow: #fff8cf 0 0 15px;
+	box-shadow: #fff8cf 0 0 15px;
+
+	-moz-transform: scale(4,1);
+	-webkit-transform: scale(4,1);
+	-o-transform: scale(4,1);
+	-transform: scale(4,1);
+
+	-moz-transition: all .5s;
+	-webkit-transition: all .5s;
+	-o-transition: all .5s;
+	transition: all .5s;
+}
+
+figure:hover figcaption {
+	opacity: 1;
+	left: -250px;
+
+	-moz-transform: scale(1,1);
+	-webkit-transform: scale(1,1);
+	-o-transform: scale(1,1);
+	transform: scale(1,1);
+}
+
+
diff --git a/dabblet.html b/dabblet.html
@@ -0,0 +1,10 @@
+
+<body>	
+	<figure>
+		<img src="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/dyrafjordur.png" width="200" height="200" alt="Dýrafjörður" />
+		<figcaption>Dýrafjörður</figcaption>
+	</figure>
+
+	<p>you can find more examples here:<br />
+	<a href="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/">css3 animated image captions</a></p>
+</body>
diff --git a/settings.json b/settings.json
@@ -0,0 +1 @@
+{"page":"css","view":"split-vertical"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"page":"css","view":"split-vertical"}
		{"view":"split-vertical","prefixfree":"1","page":"css"}