Skip to content

Instantly share code, notes, and snippets.

@teetteet

teetteet/dabblet.css

Forked from dgmid/dabblet.css
Created October 6, 2012 02:43
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. teetteet revised this gist Oct 6, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  2. dgmid revised this gist Dec 20, 2011. 3 changed files with 3 additions and 13 deletions.
    12 changes: 1 addition & 11 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -47,23 +47,13 @@ figcaption {
    background-color: rgba(0,0,0,0.75);
    font-size: 20px;
    opacity: 0;

    -moz-transform: rotate(60deg) scale(0,0);
    -webkit-transform: rotate(60deg) scale(0,0);
    -o-transform: rotate(60deg) scale(0,0);

    transform: rotate(60deg) scale(0,0);

    -moz-transition: opacity .5s, -moz-transform .5s;
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    -o-transition: opacity .5s, -o-transform .5s;
    transition: opacity .5s, transform .5s;
    }

    figure:hover figcaption {
    opacity: 1;
    -moz-transform: rotate(0deg) scale(1,1);
    -webkit-transform: rotate(0deg) scale(1,1);
    -o-transform: rotate(0deg) scale(1,1);
    transform: rotate(0deg) scale(1,1);
    }

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

    /* 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;
    top: 0;
    left: 0;
    width: 200px;
    line-height: 200px;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.75);
    font-size: 20px;
    opacity: 0;

    -moz-transform: rotate(60deg) scale(0,0);
    -webkit-transform: rotate(60deg) scale(0,0);
    -o-transform: rotate(60deg) scale(0,0);
    transform: rotate(60deg) scale(0,0);

    -moz-transition: opacity .5s, -moz-transform .5s;
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    -o-transition: opacity .5s, -o-transform .5s;
    transition: opacity .5s, transform .5s;
    }

    figure:hover figcaption {
    opacity: 1;
    -moz-transform: rotate(0deg) scale(1,1);
    -webkit-transform: rotate(0deg) scale(1,1);
    -o-transform: rotate(0deg) scale(1,1);
    transform: rotate(0deg) scale(1,1);
    }


    11 changes: 11 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    <!-- content to be placed inside <body>…</body> -->

    <body>
    <figure>
    <img src="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/holmavik.png" width="200" height="200" alt="Hólmavík" />
    <figcaption>Hólmavík</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":"html","view":"split-vertical"}