Skip to content

Instantly share code, notes, and snippets.

@dgmid

dgmid/dabblet.css

Created December 16, 2011 16:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dgmid/1486803 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dgmid/1486803 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dgmid revised this gist Dec 20, 2011. 3 changed files with 2 additions and 5 deletions.
    3 changes: 0 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -49,9 +49,6 @@ figcaption {
    font-size: 20px;
    opacity: 0;
    background-image: url(http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/zoom.png);
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    }

    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"page":"css","view":"split-vertical"}
    {"view":"split-vertical","prefixfree":"1","page":"css"}
  2. dgmid revised this gist Dec 17, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  3. dgmid created this gist Dec 16, 2011.
    63 changes: 63 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    /**
    * Animated HTML5 / CSS3 image caption - Example 2
    */

    /* 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; display: block;
    width: 200px;
    left: 0;
    top: 0;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 3px #63fdfe, 0 0 8px #fff;
    line-height: 200px;
    font-weight: bold;
    font-size: 20px;
    opacity: 0;
    background-image: url(http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/zoom.png);
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    }

    figure:hover figcaption {
    opacity: 1;

    }


    10 changes: 10 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@

    <body>
    <figure>
    <img src="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/jokulsarlon.png" width="200" height="200" alt="Jökulsárlón" />
    <figcaption>Jökulsárlón</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>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"page":"css","view":"split-vertical"}