octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
                <section class="apresenteichan">
      <a href="" data-bf="10 stylish" data-af="with less"> 
      hover effects
      </a>
    </section>
    <section class="p1">
      <a href="#" data-cont="coming">COMING</a>
    </section>
    <section class="p2">
      <a href="#" data-cont="PIANO">PIANO</a>
    </section>
    <section class="p3">
      <a href="#" data-cont="BURN">BURN</a>
    </section>
    <section class="p4">
      <a href="#" data-cont="movement" >movement</a>
    </section>
    <section class="p5">
      <a href="#" >comet</a>
    </section>
    <section class="p6">
      <a href="#">TROPICALIA</a>
    </section>
    <section class="p7">
      <a href="#">BRIDGE</a>
    </section>
    <section class="p8">
      <a href="#" data-cont="wrecked">
        wrecked
        <div class="line"></div>
      </a>
    </section>
    <section class="p9">
      <a href="#">
        BEAT
        <div class="i"></div>
        <div class="k"></div>
      </a>
    </section>

            
          
!

CSS

            
              
	//all images by unsplash.com
	*,
	*:before,
	*:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	//mixins
	.animation-fill-mode(@str){
		-webkit-animation-fill-mode: @str;
		animation-fill-mode: @str;
	}
	.animation-delay(@str){
		-webkit-animation-delay: @str;
		animation-delay: @str;
	}
	.animation (@name) {
		-webkit-animation: @name;
		-moz-animation:    @name;
		-ms-animation:     @name;
		animation:         @name;
	}
	.keyframes(@name; @arguments) {
		@-moz-keyframes @name { @arguments(); }
		@-webkit-keyframes @name { @arguments(); }
		@keyframes @name { @arguments(); }
	}
	.clip-path(@string){
		-webkit-clip-path: @string;
		clip-path: @string;
	}
	.transition (@transition) {
		-webkit-transition: @transition;  
		-moz-transition:    @transition;
		-ms-transition:     @transition; 
		-o-transition:      @transition;  
		transition:         @transition;  
	}
	.transform(@transform){
		-webkit-transform: @transform;
		-moz-transform: @transform;
		-ms-transform: @transform;
		-o-transform: @transform;
		transform: @transform;
	}
	.transform-origin(@transform-o){
		-webkit-transform-origin: @transform-o;
		-moz-transform-origin: @transform-o;
		-ms-transform-origin: @transform-o;
		-o-transform-origin: @transform-o;
		transform-origin: @transform-o;
	}
	.border_radius(
		@radius:5px
		){
		-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
		border-radius: @radius;
	}
	.box-shadow(
		@string
		){
		-webkit-box-shadow: @string;
		-moz-box-shadow: @string;
		box-shadow: @string;
	}
	.opacity(
		@opacity:0.5
		){
		opacity: @opacity;
		-webkit-opacity: @opacity;
		-moz-opacity: @opacity;
	}
	.background-image(...) {
		@process_ms: ~`(function(t){function e(t){var e,r,n,a,s,i,u,o,g="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",c=0,l=0,f="",d=[];if(!t)return t;do e=t.charCodeAt(c++),r=t.charCodeAt(c++),n=t.charCodeAt(c++),o=e<<16|r<<8|n,a=63&o>>18,s=63&o>>12,i=63&o>>6,u=63&o,d[l++]=g.charAt(a)+g.charAt(s)+g.charAt(i)+g.charAt(u);while(c<t.length);f=d.join("");var p=t.length%3;return(p?f.slice(0,p-3):f)+"===".slice(p||3)}if(t=t||8121991,8121991==t)return t;var r=/linear|radial/g.test(t)&&t.split(/,(?=\s*(?:linear|radial|url))/g),n=[],a={"to bottom":'x1="0%" y1="0%" x2="0%" y2="100%"',"to left":'x1="100%" y1="0%" x2="0%" y2="0%"',"to top":'x1="0%" y1="100%" x2="0%" y2="0%"',"to right":'x1="0%" y1="0%" x2="100%" y2="0%"',get"top"(){return this["to bottom"]},get"180deg"(){return this["to bottom"]},get"right"(){return this["to left"]},get"270deg"(){return this["to left"]},get"bottom"(){return this["to top"]},get"90deg"(){return this["to right"]},get"0deg"(){return this["to top"]},get"left"(){return this["to right"]},"-45deg":'x1="0%" y1="0%" x2="100%" y2="100%"',"45deg":'x1="0%" y1="100%" x2="100%" y2="0%"',"ellipse at center":'cx="50%" cy="50%" r="75%"',get"135deg"(){return this["-45deg"]}},s={uri_data:"url(data:image/svg+xml;base64,",xml:'<?xml version="1.0" ?>',svg_start:'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">',linear_gradient_start:'<linearGradient id="lesshat-generated" gradientUnits="userSpaceOnUse"',radial_gradient_start:'<radialGradient id="lesshat-generated" gradientUnits="userSpaceOnUse"',linear_gradient_end:"</linearGradient>",radial_gradient_end:"</radialGradient>",rect_linear:'<rect x="0" y="0" width="1" height="1" fill="url(#lesshat-generated)" />',rect_radial:'<rect x="-50" y="-50" width="101" height="101" fill="url(#lesshat-generated)" />',svg_end:"</svg>"};if(r.length){r.forEach(function(t){var e={};if(Object.keys(a).some(function(r){return t.indexOf(r)>=0?(e.svg_direction=a[r],!0):(e.svg_direction=!1,void 0)}),/linear/.test(t))e.svg_type="linear";else if(/radial/.test(t))e.svg_type="radial";else if(!/linear/.test(t)&&!/radial/.test(t))return e.url=t.trim(),e.svg_type="url",e.svg_direction=!0,n.push(e),!1;var r=t.match(/rgb|#[a-zA-Z0-9]|hsl/g).length;e.svg_stops=[],t=t.replace(/transparent/g,"rgba(0,0,0,0)"),t.match(/#[a-zA-Z0-9]/g)&&t.match(/(#[a-zA-Z0-9]+)\s*(\d+%)?/g).forEach(function(t){t=t.split(" "),e.svg_stops.push('<stop offset="'+(t[1]||!1)+'" stop-color="'+t[0]+'" stop-opacity="1"/>')}),t.match(/rgba?\(\d+,\s*\d+,\s*\d+(?:,\s*(0|1|\.\d+|0\.\d+))?\)/g)&&t.replace(/rgba?\((\d+,\s*\d+,\s*\d+)(?:,\s*(0|1|\.\d+|0\.\d+))?\)\s*(\d+%)?/g,function(t,r,n,a){e.svg_stops.push('<stop offset="'+(a||!1)+'" stop-color="rgb('+r+')" stop-opacity="'+(n||1)+'"/>')}),t.match(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)/g)&&t.replace(/hsla?\((\d+,\s*\d+%,\s*\d+%),\s*(0|1|\.\d+|0\.\d+)\)\s*(\d+%)?/g,function(t,r,n,a){e.svg_stops.push('<stop offset="'+(a||!1)+'" stop-color="hsl('+r+')" stop-opacity="'+(n||1)+'"/>')});var s=Math.floor(100/(r-1));e.svg_stops.forEach(function(t,r){/offset="false"/.test(t)&&(e.svg_stops[r]=t.replace(/offset="false"/,'offset="'+s*r+'%"'))}),e.svg_stops.sort(function(t,e){return t=t.match(/offset="(\d+)%"/),e=e.match(/offset="(\d+)%"/),2==t.length&&2==e.length?t[1]-e[1]:void 0}),n.push(e)});var i=[],u=n.every(function(t){for(var e in t)if(0==t[e]||0==t[e].length)return!1;return!0});if(!u)return 8121991;n.forEach(function(t,e){("linear"==t.svg_type||"radial"==t.svg_type)&&(i[e]=s.xml+s.svg_start),"linear"==t.svg_type?(i[e]+=s.linear_gradient_start+" "+t.svg_direction+">",t.svg_stops.forEach(function(t){i[e]+=t}),i[e]+=s.linear_gradient_end,i[e]+=s.rect_linear,i[e]+=s.svg_end):"radial"==t.svg_type?(i[e]+=s.radial_gradient_start+" "+t.svg_direction+">",t.svg_stops.forEach(function(t){i[e]+=t}),i[e]+=s.radial_gradient_end,i[e]+=s.rect_radial,i[e]+=s.svg_end):"url"==t.svg_type&&(i[e]=t.url)}),i.forEach(function(t,r){/<\?xml version="1.0" \?>/g.test(t)&&(i[r]=s.uri_data+e(t)+")")}),t=i.join(",")}return t})((function(){var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;
		@process_webkit: ~`(function(t){if(t=t||8121991,8121991==t)return t;var e={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(e);return n.some(function(n){return t.indexOf(n)>=0?(t=t.replace(new RegExp(n+"(?![ a-z0-9])","g"),e[n]),!0):(r.test(t)&&(t=t.replace(r,function(t,e,r,n,a){return e.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),t=t.replace(/(\d+)\s*deg/g,function(t,e){return 90-e+"deg"}).replace(/(linear|radial)-gradient/g,"-webkit-$1-gradient")})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`;
			@process_moz: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(t);return n.some(function(n){return e.indexOf(n)>=0?(e=e.replace(new RegExp(n+"(?![ a-z0-9])","g"),t[n]),!0):(r.test(e)&&(e=e.replace(r,function(e,t,r,n,a){return t.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),e=e.replace(/(\d+)\s*deg/g,function(e,t){return 90-t+"deg"}).replace(/(linear|radial)-gradient/g,"-moz-$1-gradient")})((function(){var t="@{arguments}";return t=t.replace(/^\[|\]$/g,"")})())`;
				@process_opera: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t={"to bottom":"top","to left":"right","to top":"bottom","to right":"left","ellipse at center":"center, ellipse cover","circle closest-side":"center center, circle contain","circle farthest-corner":"center center, circle cover","circle farthest-side":"center center, circle cover","ellipse closest-side":"center center, ellipse contain","ellipse farthest-corner":"center center, ellipse cover","ellipse farthest-side":"center center, ellipse cover"},r=/(radial-gradient\()([a-z- ]+)at\s+(\w+%?)\s*(\w*%?)/g,n=Object.keys(t);return n.some(function(n){return e.indexOf(n)>=0?(e=e.replace(new RegExp(n+"(?![ a-z0-9])","g"),t[n]),!0):(r.test(e)&&(e=e.replace(r,function(e,t,r,n,a){return t.trim()+n.trim()+" "+a.trim()+","+r.replace(/closest-side/g,"contain").replace(/farthest-corner/g,"cover").trim()})),void 0)}),e=e.replace(/(\d+)\s*deg/g,function(e,t){return 90-t+"deg"}).replace(/(linear|radial)-gradient/g,"-o-$1-gradient")})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`;
					@process: ~`(function(e){if(e=e||8121991,8121991==e)return e;var t={top:"to bottom",right:"to left",bottom:"to top",left:"to right"},r=Object.keys(t);return r.some(function(r){return e.indexOf(r)>=0&&!new RegExp("to\\s+"+r+"|at\\s+"+r,"g").test(e)?(e=e.replace(new RegExp(r),t[r]),!0):void 0}),e})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`;
					background-image: @process_ms;
					background-image: @process_webkit;
					background-image: @process_moz;
					background-image: @process_opera;
					background-image: @process;
				}
	//
	.abstlycenter(@w,@h){
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -(@w*0.5);
		margin-top: -(@h*0.5);
	}
	.grab(){
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.filter(@f){
		-webkit-filter: @f; 
		filter: @f; 
	}
	.a(@width, @height: 94px){
		width: @width;
		height: @height;
		line-height: @height;
		.abstlycenter(@width, @height);
	}

	//
	section{
		font-family: 'Open Sans', sans-serif;
		height: 350px;
		position: relative;
		background-clip: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		width: 94%;
		margin: 0 auto 30px;
		a{
			text-transform: uppercase;
			font-weight: 800;
			text-align: center;
			text-decoration: none;
			color: #fff;
			display: block;
			font-size: 4.875em;
		}
		@p1: ~'http://c-araujo.com/etCU2ay.jpg';
		@p2: ~'http://c-araujo.com/vA5Po3T.jpg';
		@p3: ~'http://c-araujo.com/UKyeAW3.jpg';
		@p4: ~'http://c-araujo.com/cjqabZU.jpg';
		@p5: ~'http://c-araujo.com/qKMt0VM.jpg';
		@p6: ~'http://c-araujo.com/c5PTClN.jpg';
		@p7: ~'http://c-araujo.com/BgQ3vcZ.jpg';
		@p8: ~'http://c-araujo.com/Z0I8N1E.jpg';
		@p9: ~'http://c-araujo.com/5cfSL2b.jpg';
		&.apresenteichan{
			.background-image(radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(218,218,218,1) 100%));
			a{
				@nw: 634;
				@w: 634px;
				@h: 140px;
				@imagesW: 1366;
				@imagesH: 768;
				.a(@w, @h);
				background-repeat: no-repeat;
				background-image:
				url(@p1),
				url(@p2),
				url(@p3),
				url(@p4),
				url(@p5),
				url(@p6),
				url(@p7),
				url(@p9);
				background-size: 
				100% auto,
				100% auto,
				100% auto,
				100% auto,
				100% auto,
				100% auto,
				100% auto,
				100% auto;
				background-position:
				center 0,
				center (1px*((@imagesH*@nw)/ @imagesW)), 
				center (2px*((@imagesH*@nw)/ @imagesW)),
				center (3px*((@imagesH*@nw)/ @imagesW)),
				center (4px*((@imagesH*@nw)/ @imagesW)),
				center (5px*((@imagesH*@nw)/ @imagesW)),
				center (6px*((@imagesH*@nw)/ @imagesW)),
				center (7px*((@imagesH*@nw)/ @imagesW));
				-webkit-background-clip: text;
				background-clip: text;
				color: rgba(0,0,0,0);
				&:before{
					content: attr(data-bf);
					position: absolute;
					font-weight: 300;
					color: #777777;
					font-size: 30px;
					line-height: 1;
				}
				&:hover{
					.animation(chngbg .8s infinite);
					.keyframes(chngbg, {
						0%{
							background-position:
							center 0,
							center (1px*((@imagesH*@nw)/ @imagesW)),
							center (2px*((@imagesH*@nw)/ @imagesW)),
							center (3px*((@imagesH*@nw)/ @imagesW)),
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						12.4%{
							background-position:
							center 0,
							center (1px*((@imagesH*@nw)/ @imagesW)),
							center (2px*((@imagesH*@nw)/ @imagesW)),
							center (3px*((@imagesH*@nw)/ @imagesW)),
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));;
						}
						12.5%{
							background-position:
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (2px*((@imagesH*@nw)/ @imagesW)),
							center (3px*((@imagesH*@nw)/ @imagesW)),
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						24.9%{
							background-position:
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (2px*((@imagesH*@nw)/ @imagesW)),
							center (3px*((@imagesH*@nw)/ @imagesW)),
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						25%{
							background-position:
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (3px*((@imagesH*@nw)/ @imagesW)),
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						37.4%{
							background-position:
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (3px*((@imagesH*@nw)/ @imagesW)),
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						37.5%{
							background-position:
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						49.9%{
							background-position:
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (4px*((@imagesH*@nw)/ @imagesW)),
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						50%{
							background-position:
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						62.4%{
							background-position:
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (5px*((@imagesH*@nw)/ @imagesW)),
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						62.5%{
							background-position:
							center (-5px*((@imagesH*@nw)/ @imagesW)),
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						74.9%{
							background-position:
							center (-5px*((@imagesH*@nw)/ @imagesW)),
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (6px*((@imagesH*@nw)/ @imagesW)),
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						75%{
							background-position:
							center (-6px*((@imagesH*@nw)/ @imagesW)),
							center (-5px*((@imagesH*@nw)/ @imagesW)),
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (7px*((@imagesH*@nw)/ @imagesW));
						}
						87.4%{
							background-position:
							center (-6px*((@imagesH*@nw)/ @imagesW)),
							center (-5px*((@imagesH*@nw)/ @imagesW)),
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0,
							center (7px*((@imagesH*@nw)/ @imagesW));;
						}
						88.5%{
							background-position:
							center (-7px*((@imagesH*@nw)/ @imagesW)),
							center (-6px*((@imagesH*@nw)/ @imagesW)),
							center (-5px*((@imagesH*@nw)/ @imagesW)),
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0;
						}
						100%{
							background-position:
							center (-7px*((@imagesH*@nw)/ @imagesW)),
							center (-6px*((@imagesH*@nw)/ @imagesW)),
							center (-5px*((@imagesH*@nw)/ @imagesW)),
							center (-4px*((@imagesH*@nw)/ @imagesW)),
							center (-3px*((@imagesH*@nw)/ @imagesW)),
							center (-2px*((@imagesH*@nw)/ @imagesW)),
							center (-1px*((@imagesH*@nw)/ @imagesW)),
							center 0;
						}
						});
	}
	}
	}
		//
		&.p1{
			background-image: url(@p1);
			a{
				@w: 356px;
				@h: 94px;
				.a(@w, @h);
				color: transparent;
				&:after, &:before{
					content: attr(data-cont);
					.abstlycenter(@w, @h);
					.transform(scale(1));
					.transition(1s all);
				}
				&:after{
					.clip-path(polygon(100% 100%, 100% 0, -35% 0, 0 100%));
					color: #fff;
					.animation(volta .5s);
					.keyframes(volta, {
						0%{
							.transform( scale(1.4));
						}
						100{
							.transform( scale(1));
						}
						});
				}
				&:before{
					.clip-path(polygon(0 100%, -35% 0, 0 0, 0 100%));
					color: #fff;
					.transform(scale(1.2));
				}
				&:hover:after{
					.animation(hideum .4s);
					.animation-fill-mode(forwards);
					.keyframes(hideum, {
						0%{
							.clip-path(polygon(100% 100%, 100% 0, -35% 0, 0 100%));
						}
						100%{
							.clip-path(polygon(100% 100%, 100% 0, 100% 0, 135% 100%));
						}
						});
				}
				&:hover:before{
					.transform( scale(1.4));
					.animation(showum .4s);
					.animation-fill-mode(forwards);
					.animation-delay(.3s);
					.keyframes(showum, {
						0%{
							.clip-path(polygon(0 100%, -35% 0, 0 0, 0 100%));
						}
						100%{
							.clip-path(polygon(135% 100%, 100% 0, 0 0, 0 100%));
						}
						});
				}
			}
		}
		&.p2{
			background-image: url(@p2);
			a{
				@w: 216px;
				.a(@w);
				.transition(all .5s ease-out);
				color: transparent;
				&:after, &:before{
					.transition(inherit);
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					content: attr(data-cont);
					color: #fff;
				}
				&:before{
					.clip-path(polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0 ));
				}
				&:after{
					.clip-path(polygon( 12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0));
				}
				&:hover{
					color: #fff;
					&:before{
						.transform( translate(0, -100%));
						color: transparent;
					}
					&:after{
						.transform( translate(0, 100%));
						color: transparent;
					}
				}
			}
		}
		&.p3{
			background-image: url(@p3);
			a{
				@w: 242px;
				@h: 94px;
				.a(@w);
				z-index: 10;
				color: #fff;
				&:before,&:after{
					content: attr(data-cont);
					.grab();
					z-index: -1;
				}
				&:before{
					color: #FF0000;
				}
				&:after{
					color: #FFBF00;
				}
				&:hover{
					&:before{
						.animation(fire 3s infinite);
						.keyframes(fire, {
							0%{
								.filter(blur(27px));
							}
							10%{
								.filter(blur(37px));
							}
							20%{
								.filter(blur(42px));
							}
							30%{
								.filter(blur(28px));
							}
							40%{
								.filter(blur(18px));
							}
							50%{
								.filter(blur(25px));
							}
							60%{
								.filter(blur(29px));
							}
							70%{
								.filter(blur(32px));
							}
							80%{
								.filter(blur(30px));
							}
							90%{
								.filter(blur(35px));
							}
							100%{
								.filter(blur(27px));
							}
							});
					}
					&:after{
						.animation(fire2 1.5s infinite);
						.keyframes(fire2, {
							0%{
								.filter(blur(7px));
							}
							10%{
								.filter(blur(17px));
							}
							20%{
								.filter(blur(12px));
							}
							30%{
								.filter(blur(8px));
							}
							40%{
								.filter(blur(12px));
							}
							50%{
								.filter(blur(5px));
							}
							60%{
								.filter(blur(9px));
							}
							70%{
								.filter(blur(12px));
							}
							80%{
								.filter(blur(10px));
							}
							90%{
								.filter(blur(15px));
							}
							100%{
								.filter(blur(17px));
							}
							});
					}
				}
			}
		}
		&.p4{
			background-image: url(@p4);
			a{
				@w: 485px;
				.a(@w);
				z-index: 10;
				&:before,&:after{
					position: absolute;
					content: attr(data-cont);
					.grab();
					.opacity(.2);
					z-index: -1;
				}
				&:before{
					color: #FFF;
				}
				&:after{
					color: #FFf;
				}
				&:hover{
					&:before{
						.animation(verd .4s infinite);
						.keyframes(verd, {
							0%{
								.transform( translate(-25px, -0px));
							}
							25%{
								.transform( translate(-25px, -25px));
							}
							50%{
								.transform( translate(25px, -25px));
							}
							75%{
								.transform( translate(25px, 25px));
							}
							100%{
								.transform( translate(-25px, -0px));
							}
							});
					}
					&:after{
						.animation(rosa .4s infinite);
						.keyframes(rosa, {
							0%{
								.transform( translate(25px, -0px));
							}
							25%{
								.transform( translate(25px, 25px));
							}
							50%{
								.transform( translate(-25px, 25px));
							}
							75%{
								.transform( translate(-25px, -25px));
							}
							100%{
								.transform( translate(25px, 0px));
							}
							});
					}
				}
			}
		}
		&.p5{
			background-image: url(@p5);
			a{
				@w: 370px;
				@dx: 20%;
				@dy: 100%;
				.a(@w);
				&:after{
					content: '';
					width: 5px;
					height: 212px;
					background-color: #fff;
					.border_radius(50%);
					.transform(rotate(45deg) translate(0%, 0%));
					.transform-origin(100% 50%);
					.abstlycenter(5px, 212px);
					.opacity(0);
				}
				&:hover{
					&:after{
						.animation(comets .5s forwards);
						.keyframes(comets, {
							0%{
								width: 0;
								.opacity(0);
								.transform(rotate(45deg) translate(-@dx, -@dy));
							}
							50%{
								width: 2px;
								.opacity(1);
							}
							100%{
								width: 0%;
								.opacity(0);
								.transform(rotate(45deg) translate(@dx, @dy));
							}
							});
					}
				}
			}
		}
		&.p6{
			background-image: url(@p6);
			overflow: hidden;
			a{
				@w: 474px;
				@h: 58px;
				.a(@w, @h);
				.transition(all .6s cubic-bezier(0,.28,0,1) );
				&:before, &:after{
					content: '';
					background-color: #fff;
					height: 4px;
					position: absolute;
					.transform( scale(1) rotate(0deg));
					.transition(all .7s cubic-bezier(.2,.02,0,1.01) .1s);
					width: @w;
				}
				&:before{
					right: 0;
					top: -10px;

				}
				&:after{
					left: 0;
					bottom: -13px;    
				}
			}
			&:hover{
				a{
					.transform(scale(.8) rotate(-40deg));
					&:before, &:after{
						width: 1000px;
					}
				}
			}
		}
		&.p7{
			background-image: url(@p7);
			a{
				@w: 307px;
				.a(@w);
				.transition(all .2s);
				&:before, &:after{
					content: '';
					.border_radius(50%);
					width: 250px;
					height: 250px;
					.abstlycenter(250px, 250px);
				}
				&:before{
					.box-shadow(inset 0px 0px 0px 6px rgba(255,255,255,1));
					.clip-path( polygon(0 0, 0 80px, 0% 80px, 0% 0));
					.transition(all .4s .25s);
				}
				&:after{
					background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNC8wMy8xNZFWqVMAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAC/UlEQVR4nO3TuRGAMADAsIT9dw4lDJDjOUsTuPFca61xmeObNO6hcY8/NI5x6zzerACeYXQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBwAm0hC/AwOVFDAAAAAElFTkSuQmCC');
					background-size: cover;
					background-position: center center;
					.clip-path( polygon(0 0, 0 0px, 100% 0px, 100% 0));
					.transition(all .2s);
				}
				&:hover{
					&:before{
						.clip-path( polygon(0 0, 0 80px, 100% 80px, 100% 0));
						.transition(all .3s);
					}
					&:after{
						 .clip-path( polygon(0 0, 0 80px, 100% 80px, 100% 0));
						 .transition(all .5s .2s);
					}
				}
			}
		}
		&.p8{
			background-image: url(@p8);
			//i love this one
			a{
				@l : 389px;
				@a :  57px;
				@dx : 20px; //horizontal displacement
				@deg : 35deg; //the breaking angle
				.a(@l, @a);
				color: transparent;
				&:before, &:after{
					content: attr(data-cont);
					.a(@l, @a);
					color: #fff;
					.transition(all .5s cubic-bezier(0,.28,0,1))
				}
				@r : @a / tan(@deg);
				@p1 : ((@l + 2* @r) / 2);
				@p2 : ((@l - 2* @r) / 2);
				@dy : @dx * tan(@deg); //vertical displacement
				&:before{
					.clip-path( polygon(0 0, 0 100%, @p1 100%, @p2 0%));
					.transform( translate(0, 0));
					.transform-origin(25% 50%);
				}
				&:after{
					.clip-path( polygon(@p2 0, @p1 100%, 100% 100%, 100% 0%));
					.transform( translate(0, 0));
					.transform-origin(75% 50%);
				}
				.line{
					background-color: rgba(255, 255, 255, 1);
					width: .001px;
					height: 2px;
					.transform( rotate(@deg));
					.abstlycenter(.001px, 2px);
					.transition(all .5s cubic-bezier(0,.28,0,1))
				}
				&:hover{
					&:before {
						.transform( translate(@dx, @dy));
					}
					&:after{
						.transform( translate(-@dx, -@dy));
					}
					.line{
						width: 2*@l;
						.abstlycenter(2*@l, 2px);
						background-color: rgba(255, 255, 255, 0.7);
					}
				}
			}
		}
		&.p9{
			background-image: url(@p9);
			a{
				@w: 211px;
				@h: 55px;
				.a(@w, @h);
				.transition(all .5s cubic-bezier(0,.28,0,1));
				&:before, &:after, div{
					content: '';
					height: 9px;
					background-color: #fff;
					position: absolute;
					right: 80%;
					width: 0;
				}
				&:before{
					top: 0;
				}
				>div:first-of-type{
					top: 15px;
				}
				>div:last-of-type{
					top: 31px;
				}
				&:after{
					top: 46px;
				}
				&:hover{
					padding-left: 40px;
					 &:before{
						.animation(bar1 .8s infinite);
						.keyframes(bar1, {
							0%{
								width: 10px
							}
							5%{
								width: 5px
							}
							16%{
								width: 25px
							}
							32%{
								width: 18px
							}
							50%{
								width: 28px
							}
							66%{
								width: 50px
							}
							73%{
								width: 45px
							}
							100%{
								width: 10px
							}
							});
					 }
					 >div:last-of-type{
						.animation(bar2 .8s infinite);
						.keyframes(bar2, {
							0%{
								width: 50px
							}
							5%{
								width: 15px
							}
							16%{
								width: 55px
							}
							32%{
								width: 18px
							}
							50%{
								width: 38px
							}
							66%{
								width: 50px
							}
							73%{
								width: 14px
							}
							100%{
								width: 50px
							}
							});
					 }
					 >div:first-of-type{
						.animation(bar3 .8s infinite);
						.keyframes(bar3, {
							0%{
								width: 0
							}
							5%{
								width: 35px
							}
							16%{
								width: 15px
							}
							32%{
								width: 25px
							}
							50%{
								width: 5px
							}
							66%{
								width: 20px
							}
							73%{
								width: 10px
							}
							100%{
								width: 30px
							}
							});
					 }
					 &:after{
						.animation(bar4 .8s infinite);
						.keyframes(bar4, {
							0%{
								width: 10px
							}
							5%{
								width: 5px
							}
							16%{
								width: 15px
							}
							32%{
								width: 25px
							}
							50%{
								width: 20px
							}
							66%{
								width: 30px
							}
							73%{
								width: 20px
							}
							100%{
								width: 10px
							}
							});
					 }
				}
			}
		}

	}

            
          
!

JS

            
              //WOW, 1K loves!
//check it too:  10 hover effects with scss
//http://codepen.io/caraujo/pen/LVPzxO
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console