Creative CSS3 Animation Art 4 (HTML and CSS Tutorial)

In today's article, I,m going to cover some really cool effects you can use in your projects.

Demo

Css code (Demo)

<!-- Get Css Code Here

@font-face {
 font-weight: normal;
 font-style: normal;
 font-family: 'codropsicons';
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before { box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body {
 background: #fff;
 color: #1e1a1b;
 font-weight: 500;
 font-size: 1em;
 font-family: 'Raleway', Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

a {
 outline: none;
 color: #dd3e62;
 text-decoration: none;
}

a:hover {
 color: #1e1a1b;
}

a:focus {
  outline: none;
 }

.hidden {
 height: 0;
 width: 0;
 overflow: hidden;
 position: absolute;
}

/* Header */
.codrops-header {
 padding: 2em 1em 4em;
 text-align: center;
 height: calc(100vh - 40px);
 margin: 20px 20px 20px;
 overflow: hidden;
 position: relative;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 flex-direction: column;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 background: url(../img/mouse.svg) no-repeat left 50% bottom 40px;
}

.codrops-header::before,
.codrops-header::after {
 content: 'Lorizzleipsizzledolorcrazy amizzlefoshizzleizzleelit Nullizzlesapienvelizzle aliquetvolutpatfoshizzlefo shizzlemynizzlegravidafoshizzle Lorizzleipsizzledolorcrazy amizzlefoshizzleizzleelit Nullizzlesapienvelizzle aliquetvolutpatfoshizzlefo shizzlemynizzlegravidafoshizzle';
 font-size: 13em;
 line-height: 0.5;
 letter-spacing: -15px;
 z-index: 10;
 text-align: justify;
 pointer-events: none;
 position: absolute;
 background: #cdced2;
 color: rgba(255,255,255,0.15);
 font-family: 'Playfair Display', cursive;
 font-weight: 900;
 font-style: italic;
 z-index: -1;
 width: 120%;
 height: 120%;
 top: -10%;
 left: -10%;
}

.codrops-header h1 {
 margin: 0;
 padding: 0 0 1em;
 font-weight: 800;
 font-size: 2.75em;
 line-height: 1;
 text-transform: uppercase;
 letter-spacing: 3px;
 color: #49484a;
}

.codrops-header h1 span {
 font-style: italic;
 font-family: 'Playfair Display', serif;
}

.codrops-header h1 .sub {
 display: block;
 padding: 0.75em 0;
 color: #F9F9F9;
 font-weight: 400;
 font-size: 68%;
 text-transform: none;
}

/* Top Navigation Style */
.codrops-links {
 position: relative;
 display: inline-block;
 text-align: center;
 white-space: nowrap;
 -webkit-flex: none;
 flex: none;
}

.codrops-links::after {
 position: absolute;
 top: 0;
 left: 50%;
 width: 1px;
 height: 100%;
 background: #fff;
 content: '';
 -webkit-transform: rotate3d(0,0,1,22.5deg);
 transform: rotate3d(0,0,1,22.5deg);
}

/* Grid */
.grid__item {
 height: calc(100vh - 40px);
 min-height: 460px;
 max-width: calc(100vw - 40px);
 background: #DDD;
 margin: 20px;
 padding: 100px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
}

/* Background colors */

.color-2 { background: #576b67; }

-->

Css code (linkstyles)

<!-- Get Css Code Here

/* General link styles */
.link {
 outline: none;
 text-decoration: none;
 position: relative;
 font-size: 8em;
 line-height: 1;
 color: #9e9ba4;
 display: inline-block;
}

/* Takiri */
.link--takiri {
 font-style: italic;
 font-family: 'Playfair Display', serif;
 font-weight: 700;
 font-size: 7em;
 padding: 0 10px 20px;
 -webkit-transition: color 0.5s;
 transition: color 0.5s;
}

.link--takiri:hover {
 color: #1e1a1b;
}

.link--takiri::before {
 content: '';
 position: absolute;
 height: 36px;
 width: 120%;
 top: 50%;
 margin-top: -18px;
 left: -10%;
 z-index: -1;
 background: #F9F9F9;
 -webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
 transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
 -webkit-transition: -webkit-transform 0.5s;
 transition: transform 0.5s;
}

.link--takiri:hover::before {
 -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
 transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.link--takiri span {
 font-size: 20%;
 font-weight: 400;
 position: absolute;
 right: 15px;
 color: #e53369;
 bottom: 0;
 opacity: 0;
 -webkit-transform: translate3d(-10px,-10px,0);
 transform: translate3d(-10px,-10px,0);
 -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
 transition: transform 0.5s, opacity 0.5s;
}

.link--takiri:hover span {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

-->

Html code

Creative CSS3 Animation Art 3 (HTML and CSS Tutorial)

Here are some of the best experiments in CSS3 animation to inspire you. ...

Demo

Css code (Demo)

<!-- Get Css Code Here

*, *:after, *:before { box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body {
 background: #fff;
 color: #1e1a1b;
 font-weight: 500;
 font-size: 1em;
 font-family: 'Raleway', Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

a {
 outline: none;
 color: #dd3e62;
 text-decoration: none;
}

a:hover {
 color: #1e1a1b;
}

a:focus {
  outline: none;
 }

.hidden {
 height: 0;
 width: 0;
 overflow: hidden;
 position: absolute;
}

.grid__item p {
 font-size: 1.5em;
 font-weight: bold;
 color: #777;
}

/* Background colors */
.color-1 {
 background-color: #53B7EE;
}

/* Related demos */

-->

Css code (linkstyles)

<!-- Get Css Code Here

/* General link styles */
.link {
 outline: none;
 text-decoration: none;
 position: relative;
 font-size: 8em;
 line-height: 1;
 color: #9e9ba4;
 display: inline-block;
}

/* Kukuri */
.link--kukuri {
 text-transform: uppercase;
 font-weight: 900;
 overflow: hidden;
 line-height: 0.75;
 color:#fff;
}

.link--kukuri:hover {
 color: #fff;
}

.link--kukuri::after {
 content: '';
 position: absolute;
 height: 16px;
 width: 100%;
 top: 50%;
 margin-top: -8px;
 right: 0;
 background:#424242;
 -webkit-transform: translate3d(-100%,0,0);
 transform: translate3d(-100%,0,0);
 -webkit-transition: -webkit-transform 0.4s;
 transition: transform 0.4s;
 -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
 transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
 -webkit-transform: translate3d(100%,0,0);
 transform: translate3d(100%,0,0);
}

.link--kukuri::before {
 content: attr(data-letters);
 position: absolute;
 z-index: 2;
 overflow: hidden;
 color: #424242;
 white-space: nowrap;
 width: 0%;
 -webkit-transition: width 0.4s 0.3s;
 transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
 width: 100%;
}

-->

Html code

Creative CSS3 Animation Art 2 (HTML and CSS Tutorial)

Today, we're going to look at how we can apply cool, but neat hover effects to show and hide images captions.....

Demo

Css Code (demo.css)

<!--Get Css code here

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

body {
 background: #2f3238;
 color: #fff;
 font-weight: 400;
 font-size: 1em;
 font-family: 'Raleway', Arial, sans-serif;
}

a {
 outline: none;
 color: #3498db;
 text-decoration: none;
}

a:hover, a:focus {
 color: #528cb3;
}

section {
 padding: 1em;
 text-align: center;
}

.content {
 margin: 0 auto;
 max-width: 1000px;
}

.content > h2 {
 clear: both;
 margin: 0;
 padding: 4em 1% 0;
 color: #484B54;
 font-weight: 800;
 font-size: 1.5em;
}

.content > h2:first-child {
 padding-top: 0em;
}

/* Header */
.codrops-header {
 margin: 0 auto;
 padding: 4em 1em;
 text-align: center;
}

.codrops-header h1 {
 margin: 0;
 font-weight: 800;
 font-size: 4em;
 line-height: 1.3;
}

.codrops-header h1 span {
 display: block;
 padding: 0 0 0.6em 0.1em;
 color: #74777b;
 font-weight: 300;
 font-size: 45%;
}

/* Demo links */
.codrops-demos {
 clear: both;
 padding: 1em 0 0;
 text-align: center;
}

.content + .codrops-demos {
 padding-top: 5em;
}

.codrops-demos a {
 display: inline-block;
 margin: 0 5px;
 padding: 1em 1.5em;
 text-transform: uppercase;
 font-weight: bold;
}

.codrops-demos a:hover,
.codrops-demos a:focus,
.codrops-demos a.current-demo {
 background: #3c414a;
 color: #fff;
}

/* To Navigation Style */
.codrops-top {
 width: 100%;
 text-transform: uppercase;
 font-weight: 800;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 display: inline-block;
 padding: 1em 2em;
 text-decoration: none;
 letter-spacing: 1px;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 display: block;
 float: left;
}

.codrops-icon:before {
 margin: 0 4px;
 text-transform: none;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 font-family: 'codropsicons';
 line-height: 1;
 speak: none;
 -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

/* Related demos */
.related {
 clear: both;
 padding: 6em 1em;
 font-size: 120%;
}

.related > a {
 display: inline-block;
 margin: 20px 10px;
 padding: 25px;
 border: 1px solid #4f7f90;
 text-align: center;
}

.related a:hover {
 border-color: #39545e;
}

.related a img {
 max-width: 100%;
 opacity: 0.8;
}

.related a:hover img,
.related a:active img {
 opacity: 1;
}

.related a h3 {
 margin: 0;
 padding: 0.5em 0 0.3em;
 max-width: 300px;
 text-align: left;
}

@media screen and (max-width: 25em) {
 .codrops-header {
  font-size: 75%;
 }
 .codrops-icon span {
  display: none;
 }
}
-->

Css Code (set2.css)

<!-- Get Css code Here

.grid {
 position: relative;
 clear: both;
 margin: 0 auto;
 padding: 1em 0 4em;
 max-width: 1000px;
 list-style: none;
 text-align: center;
}

/* Common style */
.grid figure {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 320px;
 max-width: 480px;
 max-height: 360px;
 width: 48%;
 height: auto;
 background: #3085a3;
 text-align: center;
 cursor: pointer;
}

.grid figure img {
 position: relative;
 display: block;
 min-height: 100%;
 max-width: 100%;
 opacity: 0.8;
}

.grid figure figcaption {
 padding: 2em;
 color: #fff;
 text-transform: uppercase;
 font-size: 1.25em;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
 pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
 z-index: 1000;
 text-indent: 200%;
 white-space: nowrap;
 font-size: 0;
 opacity: 0;
}

.grid figure h2 {
 word-spacing: -0.15em;
 font-weight: 300;
}

.grid figure h2 span {
 font-weight: 800;
}

.grid figure h2,
.grid figure p {
 margin: 0;
}

.grid figure p {
 letter-spacing: 1px;
 font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
 background: #2f3238;
}

figure.effect-julia img {
 max-width: none;
 height: 400px;
 -webkit-transition: opacity 1s, -webkit-transform 1s;
 transition: opacity 1s, transform 1s;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

figure.effect-julia figcaption {
 text-align: left;
}

figure.effect-julia h2 {
 position: relative;
 padding: 0.5em 0;
}

figure.effect-julia p {
 display: inline-block;
 margin: 0 0 0.25em;
 padding: 0.4em 1em;
 background: rgba(255,255,255,0.9);
 color: #2f3238;
 text-transform: none;
 font-weight: 500;
 font-size: 75%;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(-360px,0,0);
 transform: translate3d(-360px,0,0);
}

figure.effect-julia p:first-child {
 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
 -webkit-transition-delay: 0.05s;
 transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
 -webkit-transition-delay: 0s;
 transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
 -webkit-transition-delay: 0.05s;
 transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}

figure.effect-julia:hover img {
 opacity: 0.4;
 -webkit-transform: scale3d(1.1,1.1,1);
 transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
 background: #df4e4e;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
}

figure.effect-goliath img {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 30px;
}

figure.effect-goliath p {
 text-transform: none;
 font-size: 90%;
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(0,50px,0);
 transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
 -webkit-transform: translate3d(0,-80px,0);
 transform: translate3d(0,-80px,0);
}

figure.effect-goliath:hover h2 {
 -webkit-transform: translate3d(0,-100px,0);
 transform: translate3d(0,-100px,0);
}

figure.effect-goliath:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

/*-----------------*/
/***** Hera *****/
/*-----------------*/

figure.effect-hera {
 background: #303fa9;
}

figure.effect-hera h2 {
 font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(-50%,-50%,0);
 transform: translate3d(-50%,-50%,0);
 -webkit-transform-origin: 50%;
 transform-origin: 50%;
}

figure.effect-hera figcaption::before {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 border: 2px solid #fff;
 content: '';
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
 transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
 -webkit-transform-origin: 50%;
 transform-origin: 50%;
}

figure.effect-hera p {
 width: 100px;
 text-transform: none;
 font-size: 121%;
 line-height: 2;
}

figure.effect-hera p a {
 color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
 opacity: 0.6;
}

figure.effect-hera p a i {
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
 -webkit-transform: translate3d(-60px,-60px,0);
 transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
 -webkit-transform: translate3d(60px,-60px,0);
 transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
 -webkit-transform: translate3d(-60px,60px,0);
 transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
 -webkit-transform: translate3d(60px,60px,0);
 transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
 opacity: 1;
 -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
 transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
 opacity: 0;
 -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
 transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
 opacity: 1;
}

/*-----------------*/
/***** Winston *****/
/*-----------------*/

figure.effect-winston {
 background: #162633;
 text-align: left;
}

figure.effect-winston img {
 -webkit-transition: opacity 0.45s;
 transition: opacity 0.45s;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

figure.effect-winston figcaption::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url(../img/triangle.svg) no-repeat center center;
 background-size: 100% 100%;
 content: '';
 -webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
 transition: opacity 0.45s, transform 0.45s;
 -webkit-transform: rotate3d(0,0,1,45deg);
 transform: rotate3d(0,0,1,45deg);
 -webkit-transform-origin: 0 100%;
 transform-origin: 0 100%;
}

figure.effect-winston h2 {
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,20px,0);
 transform: translate3d(0,20px,0);
}

figure.effect-winston p {
 position: absolute;
 right: 0;
 bottom: 0;
 padding: 0 1.5em 7% 0;
}

figure.effect-winston a {
 margin: 0 10px;
 color: #5d504f;
 font-size: 170%;
}

figure.effect-winston a:hover,
figure.effect-winston a:focus {
 color: #cc6055;
}

figure.effect-winston p a i {
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(0,50px,0);
 transform: translate3d(0,50px,0);
}

figure.effect-winston:hover img {
 opacity: 0.6;
}

figure.effect-winston:hover h2 {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-winston:hover figcaption::before {
 opacity: 0.7;
 -webkit-transform: rotate3d(0,0,1,20deg);
 transform: rotate3d(0,0,1,20deg);
}

figure.effect-winston:hover p i {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-winston:hover p a:nth-child(3) i {
 -webkit-transition-delay: 0.05s;
 transition-delay: 0.05s;
}

figure.effect-winston:hover p a:nth-child(2) i {
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}

figure.effect-winston:hover p a:first-child i {
 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;
}

/*-----------------*/
/***** Selena *****/
/*-----------------*/

figure.effect-selena {
 background: #fff;
}

figure.effect-selena img {
 opacity: 0.95;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
 -webkit-transform: scale3d(0.95,0.95,1);
 transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h2 {
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,20px,0);
 transform: translate3d(0,20px,0);
}

figure.effect-selena p {
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
 transform: perspective(1000px) rotate3d(1,0,0,90deg);
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
}

figure.effect-selena:hover h2 {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
 opacity: 1;
 -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
 transform: perspective(1000px) rotate3d(1,0,0,0);
}

/*-----------------*/
/***** Terry *****/
/*-----------------*/

figure.effect-terry {
 background: #34495e;
}

figure.effect-terry figcaption {
 padding: 1em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
 position: absolute;
 width: 200%;
 height: 200%;
 border-style: solid;
 border-color: #101010;
 content: '';
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
 right: 0;
 bottom: 0;
 border-width: 0 70px 60px 0;
 -webkit-transform: translate3d(70px,60px,0);
 transform: translate3d(70px,60px,0);
}

figure.effect-terry figcaption::after {
 top: 0;
 left: 0;
 border-width: 15px 0 0 15px;
 -webkit-transform: translate3d(-15px,-15px,0);
 transform: translate3d(-15px,-15px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
 opacity: 0.85;
}

figure.effect-terry h2 {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 0.4em 10px;
 width: 50%;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(100%,0,0);
 transform: translate3d(100%,0,0);
}

@media screen and (max-width: 920px) {
 figure.effect-terry h2 {
  padding: 0.75em 10px;
  font-size: 120%;
 }
}

figure.effect-terry p {
 float: right;
 clear: both;
 text-align: left;
 text-transform: none;
 font-size: 111%;
}

figure.effect-terry p a {
 display: block;
 margin-bottom: 1em;
 color: #fff;
 opacity: 0;
 -webkit-transform: translate3d(90px,0,0);
 transform: translate3d(90px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
 color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-terry:hover img {
 opacity: 0.6;

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-terry:hover p a {
 opacity: 1;
}

figure.effect-terry:hover p a:first-child {
 -webkit-transition-delay: 0.025s;
 transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
 -webkit-transition-delay: 0.05s;
 transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
 -webkit-transition-delay: 0.075s;
 transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}

/*-----------------*/
/***** Phoebe *****/
/*-----------------*/

figure.effect-phoebe {
 background: #675983;
}

figure.effect-phoebe img {
 opacity: 0.85;
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-phoebe:hover img {
 opacity: 0.6;
}

figure.effect-phoebe figcaption::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url(../img/triangle2.svg) no-repeat center center;
 background-size: 100% 100%;
 content: '';
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: scale3d(5,2.5,1);
 transform: scale3d(5,2.5,1);
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before {
 opacity: 0.6;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

figure.effect-phoebe h2 {
 margin-top: 1em;
 -webkit-transition: transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,40px,0);
 transform: translate3d(0,40px,0);
}

figure.effect-phoebe:hover h2 {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-phoebe p a {
 color: #fff;
 font-size: 140%;
 opacity: 0;
 position: relative;
 display: inline-block;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-phoebe p a:first-child {
 -webkit-transform: translate3d(-60px,-60px,0);
 transform: translate3d(-60px,-60px,0);
}

figure.effect-phoebe p a:nth-child(2) {
 -webkit-transform: translate3d(0,60px,0);
 transform: translate3d(0,60px,0);
}

figure.effect-phoebe p a:nth-child(3) {
 -webkit-transform: translate3d(60px,-60px,0);
 transform: translate3d(60px,-60px,0);
}

figure.effect-phoebe:hover p a {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
 background: #3498db;
}

figure.effect-apollo img {
 opacity: 0.95;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: scale3d(1.05,1.05,1);
 transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,0.5);
 content: '';
 -webkit-transition: -webkit-transform 0.6s;
 transition: transform 0.6s;
 -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
 transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
 position: absolute;
 right: 0;
 bottom: 0;
 margin: 3em;
 padding: 0 1em;
 max-width: 150px;
 border-right: 4px solid #fff;
 text-align: right;
 opacity: 0;
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-apollo h2 {
 text-align: left;
}

figure.effect-apollo:hover img {
 opacity: 0.6;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
 -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
 transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
 opacity: 1;
 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;
}

/*-----------------*/
/***** Kira *****/
/*-----------------*/

figure.effect-kira {
 background: #fff;
 text-align: left;
}

figure.effect-kira img {
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-kira figcaption {
 z-index: 1;
}

figure.effect-kira p {
 padding: 2.25em 0.5em;
 font-weight: 600; 
 font-size: 100%;
 line-height: 1.5;
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(0,-10px,0);
 transform: translate3d(0,-10px,0);
}

figure.effect-kira p a {
 margin: 0 0.5em;
 color: #101010;
}

figure.effect-kira p a:hover,
figure.effect-kira p a:focus {
 opacity: 0.6;
}

figure.effect-kira figcaption::before {
 position: absolute;
 top: 0;
 right: 2em;
 left: 2em;
 z-index: -1;
 height: 3.5em;
 background: #fff;
 content: '';
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
 transform: translate3d(0,4em,0) scale3d(1,0.023,1);
 -webkit-transform-origin: 50% 0;
 transform-origin: 50% 0;
}

figure.effect-kira:hover img {
 opacity: 0.5;
}

figure.effect-kira:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-kira:hover figcaption::before {
 opacity: 0.7;
 -webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
 transform: translate3d(0,5em,0) scale3d(1,1,1);
}

/*-----------------*/
/***** Steve *****/
/*-----------------*/

figure.effect-steve {
 z-index: auto;
 overflow: visible;
 background: #000;
}

figure.effect-steve:before,
figure.effect-steve h2:before {
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background: #000;
 content: '';
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-steve:before {
 box-shadow: 0 3px 30px rgba(0,0,0,0.8);
 opacity: 0;
}

figure.effect-steve figcaption {
 z-index: 1;
}

figure.effect-steve img {
 opacity: 1;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: perspective(1000px) translate3d(0,0,0);
 transform: perspective(1000px) translate3d(0,0,0);
}

figure.effect-steve h2,
figure.effect-steve p {
 background: #fff;
 color: #2d434e;
}

figure.effect-steve h2 {
 position: relative;
 margin-top: 2em;
 padding: 0.25em;
}

figure.effect-steve h2:before {
 box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

figure.effect-steve p {
 margin-top: 1em;
 padding: 0.5em;
 font-weight: 800;
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: scale3d(0.9,0.9,1);
 transform: scale3d(0.9,0.9,1);
}

figure.effect-steve:hover:before {
 opacity: 1;
}

figure.effect-steve:hover img {
 -webkit-transform: perspective(1000px) translate3d(0,0,21px);
 transform: perspective(1000px) translate3d(0,0,21px);
}

figure.effect-steve:hover h2:before {
 opacity: 0;
}

figure.effect-steve:hover p {
 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

/*-----------------*/
/***** Moses *****/
/*-----------------*/

figure.effect-moses {
 background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
 background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
}

figure.effect-moses img {
 opacity: 0.85;
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-moses h2,
figure.effect-moses p {
 padding: 20px;
 width: 50%;
 height: 50%;
 border: 2px solid #fff;
}

figure.effect-moses h2 {
 padding: 20px;
 width: 50%;
 height: 50%;
 text-align: left;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(10px,10px,0);
 transform: translate3d(10px,10px,0);
}

figure.effect-moses p {
 float: right;
 padding: 20px;
 text-align: right;
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(-50%,-50%,0);
 transform: translate3d(-50%,-50%,0);
}

figure.effect-moses:hover h2 {
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-moses:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-moses:hover img {
 opacity: 0.6;
}

/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.effect-jazz {
 background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
 background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
}

figure.effect-jazz img {
 opacity: 0.9;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz figcaption::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 content: '';
 opacity: 0;
 -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
 transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

figure.effect-jazz h2,
figure.effect-jazz p {
 opacity: 1;
 -webkit-transform: scale3d(0.8,0.8,1);
 transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2 {
 padding-top: 26%;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
}

figure.effect-jazz p {
 padding: 0.5em 2em;
 text-transform: none;
 font-size: 0.85em;
 opacity: 0;
}

figure.effect-jazz:hover img {
 opacity: 0.7;
 -webkit-transform: scale3d(1.05,1.05,1);
 transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after {
 opacity: 1;
 -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
 transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {
 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
 background: #030c17;
}

figure.effect-ming img {
 opacity: 0.9;
 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
 position: absolute;
 top: 30px;
 right: 30px;
 bottom: 30px;
 left: 30px;
 border: 2px solid #fff;
 box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
 content: '';
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: scale3d(1.4,1.4,1);
 transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
 margin: 20% 0 10px 0;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
}

figure.effect-ming p {
 padding: 1em;
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
}

figure.effect-ming:hover h2 {
 -webkit-transform: scale(0.9);
 transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
 background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
 opacity: 0.4;
}

/*---------------*/
/***** Lexi *****/
/*---------------*/

figure.effect-lexi {
 background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
 background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

figure.effect-lexi img {
 margin: -10px 0 0 -10px;
 max-width: none;
 width: -webkit-calc(100% + 10px);
 width: calc(100% + 10px);
 opacity: 0.9;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(10px,10px,0);
 transform: translate3d(10px,10px,0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
 position: absolute;
 right: -100px;
 bottom: -100px;
 width: 300px;
 height: 300px;
 border: 2px solid #fff;
 border-radius: 50%;
 box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
 content: '';
 opacity: 0;
 -webkit-transform: scale3d(0.5,0.5,1);
 transform: scale3d(0.5,0.5,1);
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
 opacity: 0.6;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-lexi h2 {
 text-align: left;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(5px,5px,0);
 transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
 position: absolute;
 right: 0;
 bottom: 0;
 padding: 0 1.5em 1.5em 0;
 width: 140px;
 text-align: right;
 opacity: 0;
 -webkit-transform: translate3d(20px,20px,0);
 transform: translate3d(20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

figure.effect-lexi:hover h2,
figure.effect-lexi:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
 background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
 background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
 opacity: 0.1;
 -webkit-transform: scale3d(2,2,1);
 transform: scale3d(2,2,1);
}

figure.effect-duke h2 {
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: scale3d(0.8,0.8,1);
 transform: scale3d(0.8,0.8,1);
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
}

figure.effect-duke p {
 position: absolute;
 bottom: 0;
 left: 0;
 margin: 20px;
 padding: 30px;
 border: 2px solid #fff;
 text-transform: none;
 font-size: 90%;
 opacity: 0;
 -webkit-transform: scale3d(0.8,0.8,1);
 transform: scale3d(0.8,0.8,1);
 -webkit-transform-origin: 50% -100%;
 transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);
}

/* Media queries */
@media screen and (max-width: 50em) {
 .content {
  padding: 0 10px;
  text-align: center;
 }
 .grid figure {
  display: inline-block;
  float: none;
  margin: 10px auto;
  width: 100%;
 }
}
-->

Html Code

Creative CSS3 Animation Art 1 (HTML and CSS Tutorial)

today we'll talk about CSS Image Hover Effects. We've prepared a tutorials for you to add some effects to your images.

Demo

Css code (Demo.css)

<!-- Get Css Code Here

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

body {
 background: #2f3238;
 color: #fff;
 font-weight: 400;
 font-size: 1em;
 font-family: 'Raleway', Arial, sans-serif;
}

a {
 outline: none;
 color: #3498db;
 text-decoration: none;
}

a:hover, a:focus {
 color: #528cb3;
}

section {
 padding: 1em;
 text-align: center;
}

.content {
 margin: 0 auto;
 max-width: 1000px;
}

.content > h2 {
 clear: both;
 margin: 0;
 padding: 4em 1% 0;
 color: #484B54;
 font-weight: 800;
 font-size: 1.5em;
}

.content > h2:first-child {
 padding-top: 0em;
}

/* Header */
.codrops-header {
 margin: 0 auto;
 padding: 4em 1em;
 text-align: center;
}

.codrops-header h1 {
 margin: 0;
 font-weight: 800;
 font-size: 4em;
 line-height: 1.3;
}

.codrops-header h1 span {
 display: block;
 padding: 0 0 0.6em 0.1em;
 color: #74777b;
 font-weight: 300;
 font-size: 45%;
}

/* Demo links */
.codrops-demos {
 clear: both;
 padding: 1em 0 0;
 text-align: center;
}

.content + .codrops-demos {
 padding-top: 5em;
}

.codrops-demos a {
 display: inline-block;
 margin: 0 5px;
 padding: 1em 1.5em;
 text-transform: uppercase;
 font-weight: bold;
}

.codrops-demos a:hover,
.codrops-demos a:focus,
.codrops-demos a.current-demo {
 background: #3c414a;
 color: #fff;
}

/* To Navigation Style */
.codrops-top {
 width: 100%;
 text-transform: uppercase;
 font-weight: 800;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 display: inline-block;
 padding: 1em 2em;
 text-decoration: none;
 letter-spacing: 1px;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 display: block;
 float: left;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

/* Related demos */
.related {
 clear: both;
 padding: 6em 1em;
 font-size: 120%;
}

.related > a {
 display: inline-block;
 margin: 20px 10px;
 padding: 25px;
 border: 1px solid #4f7f90;
 text-align: center;
}

.related a:hover {
 border-color: #39545e;
}

.related a img {
 max-width: 100%;
 opacity: 0.8;
}

.related a:hover img,
.related a:active img {
 opacity: 1;
}

.related a h3 {
 margin: 0;
 padding: 0.5em 0 0.3em;
 max-width: 300px;
 text-align: left;
}

@media screen and (max-width: 25em) {
 .codrops-header {
  font-size: 75%;
 }
 .codrops-icon span {
  display: none;
 }
}

-->

Css code (Set1.css)

<!-- Get Css Code Here

@font-face {
 font-weight: normal;
 font-style: normal;
 font-family: 'feathericons';
 src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
 src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
  url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
  url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
  url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}

.grid {
 position: relative;
 margin: 0 auto;
 padding: 1em 0 4em;
 max-width: 1000px;
 list-style: none;
 text-align: center;
}

/* Common style */
.grid figure {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 320px;
 max-width: 480px;
 max-height: 360px;
 width: 48%;
 background: #3085a3;
 text-align: center;
 cursor: pointer;
}

.grid figure img {
 position: relative;
 display: block;
 min-height: 100%;
 max-width: 100%;
 opacity: 0.8;
}

.grid figure figcaption {
 padding: 2em;
 color: #fff;
 text-transform: uppercase;
 font-size: 1.25em;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
 pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.grid figure h2 {
 word-spacing: -0.15em;
 font-weight: 300;
}

.grid figure h2 span {
 font-weight: 800;
}

.grid figure h2,
.grid figure p {
 margin: 0;
}

.grid figure p {
 letter-spacing: 1px;
 font-size: 68.5%;
}

/*---------------*/
/***** Layla *****/
/*---------------*/

figure.effect-layla {
 background: #18a367;
}

figure.effect-layla img {
 height: 390px;
}

figure.effect-layla figcaption {
 padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
 position: absolute;
 content: '';
 opacity: 0;
}

figure.effect-layla figcaption::before {
 top: 50px;
 right: 30px;
 bottom: 50px;
 left: 30px;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-transform: scale(0,1);
 transform: scale(0,1);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
 top: 30px;
 right: 50px;
 bottom: 30px;
 left: 50px;
 border-right: 1px solid #fff;
 border-left: 1px solid #fff;
 -webkit-transform: scale(1,0);
 transform: scale(1,0);
 -webkit-transform-origin: 100% 0;
 transform-origin: 100% 0;
}

figure.effect-layla h2 {
 padding-top: 26%;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
}

figure.effect-layla p {
 padding: 0.5em 2em;
 text-transform: none;
 opacity: 0;
 -webkit-transform: translate3d(0,-10px,0);
 transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
 -webkit-transform: translate3d(0,-30px,0);
 transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
 opacity: 0.7;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;
}

-->

Html code

Creative CSS3 Animation Menu 4 (HTML and CSS Tutorial)

There are two different types of navigation menus in HTML, vertical, and horizontal. This tutorial will take you through creating a stylish CSS 3 vertical menu. I'll show you how to create a basic menu, all the way through to an animated sliding menu - no Javascript needed.

Demo

Css Code 1 (demo)

<!--Get Css code Here

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
@font-face {
 font-family: 'codropsicons';
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 font-weight: normal;
 font-style: normal;
}

.container > header,
.codrops-top {
 font-family: 'Lato', Arial, sans-serif;
}

.container > header {
 margin: 0 auto;
 padding: 2em;
 text-align: center;
 color: #89867e;
}

.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}

.container > header span {
 display: block;
 font-size: 60%;
 color: #ceccc6;
 padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
 background: #fff;
 background: rgba(255, 255, 255, 0.6);
 text-transform: uppercase;
 width: 100%;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 text-decoration: none;
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #888;
 display: inline-block;
}

.codrops-top a:hover {
 background: rgba(255,255,255,0.95);
 color: #716d62;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 float: left;
 display: block;
}

.codrops-icon:before {
 font-family: 'codropsicons';
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

.container > section {
 margin: 0 auto;
 padding: 10em 3em;
 text-align: center;
}

.color-10 {
 background: #16a085;
}

@media screen and (max-width: 25em) {

.codrops-icon span {
  display: none;
 }

}

-->

Css Code 2 (Component)

<!--Get Css code Here

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
 font-family: 'Raleway', sans-serif;
}

nav a {
 position: relative;
 display: inline-block;
 margin: 15px 25px;
 outline: none;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 text-shadow: 0 0 1px rgba(255,255,255,0.3);
 font-size: 1.35em;
}

nav a:hover,
nav a:focus {
 outline: none;
}

/* Effect 10: reveal, push out */
.cl-effect-10  {
 position: relative;
 z-index: 1;
}

.cl-effect-10 a {
 overflow: hidden;
 margin: 0 15px;
}

.cl-effect-10 a span {
 display: block;
 padding: 10px 20px;
 background: #0f7c67;
 -webkit-transition: -webkit-transform 0.3s;
 -moz-transition: -moz-transform 0.3s;
 transition: transform 0.3s;
}

.cl-effect-10 a::before {
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 padding: 10px 20px;
 width: 100%;
 height: 100%;
 background: #fff;
 color: #0f7c67;
 content: attr(data-hover);
 -webkit-transition: -webkit-transform 0.3s;
 -moz-transition: -moz-transform 0.3s;
 transition: transform 0.3s;
 -webkit-transform: translateX(-25%);
}

.cl-effect-10 a:hover span,
.cl-effect-10 a:focus span {
 -webkit-transform: translateX(100%);
 -moz-transform: translateX(100%);
 transform: translateX(100%);
}

.cl-effect-10 a:hover::before,
.cl-effect-10 a:focus::before {
 -webkit-transform: translateX(0%);
 -moz-transform: translateX(0%);
 transform: translateX(0%);
}

-->

Html Code

Creative CSS3 Animation Menu 3 (HTML and CSS Tutorial)

Best Free HTML5 & CSS3 Navigation Menus that can help you in getting inspired.

Demo

Css Code 1 (demo.css)

<!--Get Css code Here

.container > header,
.codrops-top {
 font-family: 'Lato', Arial, sans-serif;
}

.container > header {
 margin: 0 auto;
 padding: 2em;
 text-align: center;
 color: #89867e;
}

.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}

.container > header span {
 display: block;
 font-size: 60%;
 color: #ceccc6;
 padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
 background: #fff;
 background: rgba(255, 255, 255, 0.6);
 text-transform: uppercase;
 width: 100%;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 text-decoration: none;
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #888;
 display: inline-block;
}

.codrops-top a:hover {
 background: rgba(255,255,255,0.95);
 color: #716d62;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 float: left;
 display: block;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

.container > section {
 margin: 0 auto;
 padding: 10em 3em;
 text-align: center;
}

.color-1 {
 background: #435a6b;
}

@media screen and (max-width: 25em) {

.codrops-icon span {
  display: none;
 }

}

-->

Css Code 2 (Component.css)

<!--Get Css code Here

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
 font-family: 'Raleway', sans-serif;
}

nav a:hover,
nav a:focus {
 outline: none;
}

/* Effect 20: 3D side */
.cl-effect-20 a {
 line-height: 2em;
 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 perspective: 800px;
}

.cl-effect-20 a span {
 position: relative;
 display: inline-block;
 padding: 3px 15px 0;
 background: #587285;
 box-shadow: inset 0 3px #2f4351;
 -webkit-transition: background 0.6s;
 -moz-transition: background 0.6s;
 transition: background 0.6s;
 -webkit-transform-origin: 50% 0;
 -moz-transform-origin: 50% 0;
 transform-origin: 50% 0;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform-origin: 0% 50%;
 -moz-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
}

.cl-effect-20 a span::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #fff;
 color: #2f4351;
 content: attr(data-hover);
 -webkit-transform: rotateX(270deg);
 -moz-transform: rotateX(270deg);
 transform: rotateX(270deg);
 -webkit-transition: -webkit-transform 0.6s;
 -moz-transition: -moz-transform 0.6s;
 transition: transform 0.6s;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 transform-origin: 0 0;
 pointer-events: none;
}

.cl-effect-20 a:hover span,
.cl-effect-20 a:focus span {
 background: #2f4351;
}

.cl-effect-20 a:hover span::before,
.cl-effect-20 a:focus span::before {
 -webkit-transform: rotateX(10deg); 
 -moz-transform: rotateX(10deg);
 transform: rotateX(10deg);
}

-->

Html Code

Creative CSS3 Animation Menu 2 (HTML and CSS Tutorial)

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible.In this tutorial we will be creating a responsive navigation menu using only HTML and CSS.

Demo

Get CSS code here

<!-- Add this CSS Code to your style sheet

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: -webkit-linear-gradient(SlateBlue, RoyalBlue);
  background: linear-gradient(SlateBlue, RoyalBlue);
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
nav,
nav ul {
  position: fixed;
  width: 100%;
  height: 100%;
}
nav {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  opacity: 0;
  -webkit-transform: scale(0.3);
      -ms-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition: all 0.25s;
          transition: all 0.25s;
}
nav ul li {
  display: table;
  width: 100%;
  height: calc(100% /4);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  -webkit-perspective: 0px;
          perspective: 0px;
  -webkit-transform: rotateX(-90deg) scale(0.5);
          transform: rotateX(-90deg) scale(0.5);
  -webkit-transition: all 0.3s ease 0.1s;
          transition: all 0.3s ease 0.1s;
}
nav ul li a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-size: 2.5em;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
  font-family: 'Helvetica', sans-serif;
  font-weight: 100;
}
nav ul li a:hover {
  background: rgba(255,255,255,0.1);
}
#toggle {
  display: none;
}
#toggle + #toggle-btn,
.nav-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  border-radius: 3px;
  cursor: pointer;
}
#toggle + #toggle-btn {
  height: 40px;
  width: 40px;
  z-index: 1000;
  background: rgba(0,0,0,0.05);
}
.nav-icon,
.nav-icon:before,
.nav-icon:after {
  position: absolute;
  height: 4px;
  width: 40px;
  margin: 18px 0;
  z-index: 900;
  border-radius: 3px;
  background: #fff;
  -webkit-transition: all 0.25s;
          transition: all 0.25s;
}
.nav-icon:before {
  content: "";
  margin-top: -18px;
}
.nav-icon:after {
  content: "";
  margin-top: 18px;
}
#toggle:checked ~ nav {
  opacity: 1;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
#toggle:checked ~ .nav-icon {
  background: rgba(255,0,0,0);
}
#toggle:checked ~ .nav-icon:before {
  -webkit-transform: rotate(-225deg);
      -ms-transform: rotate(-225deg);
          transform: rotate(-225deg);
  margin-top: 0;
}
#toggle:checked ~ .nav-icon:after {
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  margin-top: 0;
}
#toggle:checked ~ nav ul li {
  -webkit-transform: rotateY(0deg) scale(1);
          transform: rotateY(0deg) scale(1);
}

-->

Get Html code here

Creative CSS3 Animation Menu 1 (HTML and CSS Tutorial)

Grab and build a beautiful navigation menu template for your website and impress your visitors.

Demo

Get CSS code here

<!-- Add this CSS Code to your style sheet

.ca-menu{
    padding: 0 0 0 48px;
    margin: 20px auto;
    width: 1020px;
}
.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #f6f6f6;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    margin-left:-48px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #f6f6f6;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
    color: #555;
}

.ca-menu li:hover{
    border-color: #333;
    z-index: 999;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
    color: #000;
    font-size: 60px;
    text-shadow: 0px 0px 1px #000;
    -webkit-animation: moveFromBottom 300ms ease;
    -moz-animation: moveFromBottom 300ms ease;
    -ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #000;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -moz-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(200%) scale(0.5);
        opacity: 0;
    }
    to {
        -ms-transform: translateY(0%) scale(1);
        opacity: 1;        
    }
}

-->

Get html code here

<!-- Add this HTML Code

<html lang="en">
    <head>
      
       
        <link rel="stylesheet" type="text/css" href="css/style10.css" />
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
    </head>
    <body>
        
            
           
         
              
                <ul class="ca-menu">
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Home</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
About</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon" id="heart">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Service</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Project</h2>
</div>
</a>
                    </li>
<li>
                        <a href="#">
                            <span class="ca-icon">icon</span>
                            <div class="ca-content">
                                <h2 class="ca-main">
Contact</h2>
</div>
</a>
                    </li>
</ul>
</body>
</html>

-->