Skip to content

Instantly share code, notes, and snippets.

Created December 14, 2014 00:13

Revisions

  1. @invalid-email-address Anonymous created this gist Dec 14, 2014.
    12 changes: 12 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <div id="pommes" class="mayo ketchup">

    <div class="bildueberschrift">ueberschrift</div>

    <!-- http://www.khaosok-treehouse.com/images/tours/tubing%20sok%20river%20tree%20house%205.jpg -->


    <p class="unterschrift">
    das ist ein abschnitt
    </p>

    </div>
    7 changes: 7 additions & 0 deletions myPxYP.markdown
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    myPxYP
    ------


    A [Pen](http://codepen.io/anon/pen/myPxYP) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/myPxYP/license).
    44 changes: 44 additions & 0 deletions style.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    #pommes {
    opacity: 0.8;
    color: #fff;
    letter-spacing: 5px;
    transition: 0.5s ease-in;
    background: transparent;
    width: 400px;
    height: 300px;
    background: url(http://www.khaosok-treehouse.com/images/tours/tubing%20sok%20river%20tree%20house%205.jpg);
    text-align: center;
    }

    #pommes .bildueberschrift{
    font-size: 12pt;
    transition: 0.5s ease-in;
    position: relative;
    top: 40%;
    left:10px;
    padding:0;


    }

    #pommes:hover .bildueberschrift {
    font-size: 30pt;
    text-shadow: 9px 9px 9px #000;
    }


    #pommes .unterschrift {
    position: relative;
    padding-left: 8px;
    top: 52%;
    opacity:0;
    transition: 1.2s ease-in;
    }

    #pommes:hover .unterschrift {
    opacity:1;
    font-size: 156%;
    text-shadow: 3px 3px 4px #000;
    top: 48%;

    }