CSS Snacks

Bite-sized features made entirely with HTML/CSS

Effects

Icons Images Transitions 3D Cube

Hover over each element to see its effect!

Icon Effects

Wobble

Hang

Rotate

Grow

Float

Buzz

Rotate HTML: 

          <div class="rotate">
            <img src="assets/images/pizza.png" width="120" height="120" />
          </div>


Rotate CSS: 

          .rotate {
            display: inline-block;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transition: transform 0.3s;
            transition: transform 0.3s;
          }

          .rotate:hover {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
          }






Image Effects



Parallax Scrolling

(No Hover)

HTML: 

          <div class="parallax">
            <div class="plax-image"></div>
          </div>


CSS: 

          .parallax {
            padding: 10px 100px 100px 100px;
          }

          .plax-image {
            border: 1px solid black;
            height: 415px;
            background-image: url('../images/iceclimb.jpg');
            background-attachment: fixed;
            background-position: center center;
            background-size: 100% 100%;
          }



Blur

HTML: 

          <div class="blur-container">
            <img class="blur-image" src="assets/images/SFSunset.jpg" />
          </div>


CSS: 

          .blur-container {
            margin: 0 auto;
            padding: 10px 100px 100px 100px;
          }

          .blur-image {
            height: 100%;
            width: 100%;
            border: 1px solid black;
            -webkit-webkit-transition: all 1s ease;
            -moz-webkit-transition: all 1s ease;
            -ms-webkit-transition: all 1s ease;
            -o-webkit-transition: all 1s ease;
            transition: all 1s ease;
          }

          .blur-image:hover {
            -webkit-filter: blur(3px);
          }



Focus

HTML: 

          <div class="focus-container">
            <img class="focus-image" src="assets/images/surfing.jpeg" />
          </div>


CSS: 

          .focus-image {
            height: 100%;
            width: 100%;
            border: 1px solid black;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -ms-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
          }

          .focus-container:hover .focus-image{
            border-radius: 50%;
            border: 10px solid black;
          }






Transition Effects

Flip

Is this your card?

HTML: 

            <div class="card-container">
              <div class="card">
                <div class="card-front"></div>
                <div class="card-back"></div>
              </div>
            </div>


CSS: 

            .card-container {
              perspective: 1000px;
              margin: 0 auto;
            }

            .card-container, .card-front, .card-back {
              width: 320px;
              height: 480px;
            }

            .card-container:hover .card {
              transform: rotateY(180deg);
            }

            .card {
              position: relative;
              transition: 0.6s;
              transform-style: preserve-3d;
            }

            .card-front, .card-back {
              position: absolute;
              top: 0;
              left: 0;
              backface-visibility: hidden;
            }

            .card-front {
              background-image: url('../images/bluecardback.png');
              background-size: 100% 100%;
              transform: rotateY(0deg);
            }

            .card-back {
              transform: rotateY(180deg);
              background-image: url('../images/aceofspades.png');
              background-size: 100% 100%;
            }



Slide

Open Me!

Close Me!

HTML: 

          <div class="door-container">
            <div class="door-content">
              <h3 id="visible-message">Open Me!</h3>
              <h3 id="hidden-message">Close Me!</h3>
            </div>
            <div class="door-top"></div>
          </div>


CSS: 

          .door-container {
            height: 500px;
            margin: 0px 200px 100px 200px;
            position: relative;
            overflow-x: hidden;
          }

          .door-content {
            height: 100%;
            color: #000;
            background: #FFF;
            text-align: center;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, .5) inset;
          }

          .door-top {
            background-image: url('../images/GlassDoor.png');
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            transition: left 0.6s ease;
          }

          .door-container:hover .door-top {
            left: -100%;
          }

          .door-container:hover #hidden-message {
            color: black;
          }

          .door-container:hover #visible-message {
            color: rgb(255, 255, 255);
          }

          #visible-message {
            margin: 0;
            padding-top: 175px;
            transition: 0.6s ease;
          }

          #hidden-message {
            margin: 0;
            padding-top: 125px;
            color: rgb(255, 255, 255);
            transition: 0.6s ease;
          }






3D Cube