I'm looking for new effects, to improve my portfolio. I really liked this effect, but there is an error that I could not adjust. The height cuts when hovering.
After much searching, I was able to do a size adjustment by moving the svg parameter:
<polygon id="cp_poly_up" points="0,0 560,0 310,160" />
(I changed it to 560).
But now you need to adjust the height.
Is there any documentation, or meanings in the parameters, or any ideas if I'm on the right track?
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);
@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);
}
.codrops-icon {
display: inline-block;
margin: 15px;
text-decoration: none;
}
.codrops-icon span {
display: none;
}
.codrops-icon:before {
margin: 0 5px;
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";
}
/* 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 */
}
.grid__item p {
font-size: 1.5em;
font-weight: bold;
color: #777;
}
/* Background colors */
.color-1 { background: #E8E0DA; }
.color-2 { background: #576b67; }
.color-3 { background: #383A35; }
.color-4 { background: #333; }
.color-5 { background: #fda9a9; }
.color-7 { background: #cde7d3; }
.color-8 { background: #DCECDD; }
.color-9 { background: #dedbba; }
.color-10 { background: #222; }
.color-11 { background: #515151; }
/* Related demos */
.content--related {
padding: 3em 0;
text-align: center;
font-weight: bold;
}
.media-item {
display: inline-block;
padding: 1em;
vertical-align: top;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.media-item__img {
max-width: 100%;
opacity: 0.3;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
opacity: 1;
}
.media-item__title {
margin: 0;
padding: 0.5em;
font-size: 1em;
}
@media screen and (max-width: 50em) {
.codrops-header {
padding: 3em 10% 4em;
}
.grid__item {
width: 100%;
}
}
@media screen and (max-width: 40em) {
.codrops-header h1 {
font-size: 1.85em;
}
}
/* 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: #c5c2b8;
}
.link--kukuri:hover {
color: #c5c2b8;
}
.link--kukuri::after {
content: '';
position: absolute;
height: 16px;
width: 100%;
top: 50%;
margin-top: -8px;
right: 0;
background: #F9F9F9;
-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%;
}
/* 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);
}
/* Surinami */
.link--surinami {
font-family: 'Playfair Display', serif;
font-weight: 400;
text-transform: uppercase;
font-size: 9em;
color: #3A4945;
padding: 0 0 0.125em;
}
.link--surinami::before,
.link--surinami::after {
content: '';
width: 100%;
height: 3px;
z-index: -1;
background: #3A4945;
position: absolute;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link--surinami::before {
right: 0;
top: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.link--surinami::after {
left: 0;
bottom: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.link--surinami:hover::before,
.link--surinami:hover::after {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.link--surinami span {
position: relative;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
.link--surinami:hover span {
color: transparent;
}
.link--surinami span::before,
.link--surinami span::after {
position: absolute;
color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
.link--surinami span::before {
content: attr(data-letters-l);
left: 0;
-webkit-transform: translate3d(-5px,0,0);
transform: translate3d(-5px,0,0);
}
.link--surinami span::after {
content: attr(data-letters-r);
right: 0;
-webkit-transform: translate3d(5px,0,0);
transform: translate3d(5px,0,0);
}
.link--surinami:hover span::before,
.link--surinami:hover span::after {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Nukun */
.link--nukun {
color: #E3E8DC;
font-weight: 900;
text-transform: uppercase;
overflow: hidden;
padding: 10px 0;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.link--nukun:hover {
color: #1e1a1b;
}
.link--nukun::before,
.link--nukun::after {
content: '';
position: absolute;
width: 30%;
height: 5px;
background: #E3E8DC;
bottom: 0;
left: 35%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.link--nukun::after {
background: #ACD07A;
-webkit-transform: translate3d(-300%,0,0) scale3d(0,1,1);
transform: translate3d(-300%,0,0) scale3d(0,1,1);
}
.link--nukun:hover::before {
-webkit-transform: translate3d(300%,0,0) scale3d(0,1,1);
transform: translate3d(300%,0,0) scale3d(0,1,1);
}
.link--nukun:hover::after {
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}
.link--nukun span {
color: #E3E8DC;
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.link--nukun:hover span {
color: #fff;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
transform: perspective(1000px) rotate3d(0,1,0,180deg);
}
/* Kumya */
.link--kumya {
font-family: 'Syncopate', sans-serif;
font-size: 6.5em;
overflow: hidden;
padding: 10px 10px 0;
line-height: 1;
color: #242424;
}
.link--kumya:hover {
color: #242424;
}
.link--kumya::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
z-index: -1;
background: #242424;
-webkit-transform: translate3d(101%,0,0);
transform: translate3d(101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kumya:hover::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link--kumya span {
display: block;
position: relative;
}
.link--kumya span::before {
content: attr(data-letters);
position: absolute;
color: #fff;
left: 0;
overflow: hidden;
white-space: nowrap;
width: 0%;
-webkit-transition: width 0.5s;
transition: width 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kumya:hover span::before {
width: 100%;
}
/* Urpi */
.link--urpi {
font-family: 'Oswald', sans-serif;
font-size: 10em;
/* font-weight: 700; */
/* text-transform: uppercase; */
color: #e78383;
-webkit-transition: color 0s 0.5s;
transition: color 0s 0.5s;
}
.link--urpi:hover {
color: transparent;
-webkit-transition: none;
transition: none;
}
.link--urpi::before,
.link--urpi::after {
content: attr(data-letters);
position: absolute;
top: 0;
left: 0;
color: #e78383;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--urpi::before {
-webkit-clip-path: url(#cp_up);
clip-path: url(../index.html#cp_up);
}
.link--urpi::after {
-webkit-clip-path: url(#cp_down);
clip-path: url(../index.html#cp_down);
}
.link--urpi:hover::before,
.link--urpi:hover::after {
color: #fff;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--urpi:hover::before {
-webkit-transform: translate3d(4px,1px,0);
transform: translate3d(4px,1px,0);
}
.link--urpi:hover::after {
-webkit-transform: translate3d(-4px,-1px,0);
transform: translate3d(-4px,-1px,0);
}
/* Mallki */
.link--mallki {
font-weight: 800;
color: #81a689;
font-family: 'Dosis', sans-serif;
-webkit-transition: color 0.5s 0.25s;
transition: color 0.5s 0.25s;
overflow: hidden;
}
.link--mallki:hover {
-webkit-transition: none;
transition: none;
color: transparent;
}
.link--mallki::before {
content: '';
width: 100%;
height: 6px;
margin: -3px 0 0 0;
background: #fff;
position: absolute;
left: 0;
top: 50%;
-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--mallki:hover::before {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--mallki span {
position: absolute;
height: 50%;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
}
.link--mallki span::before {
content: attr(data-letters);
color: red;
position: absolute;
left: 0;
width: 100%;
color: #fff;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link--mallki span:nth-child(2) {
top: 50%;
}
.link--mallki span:first-child::before {
top: 0;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.link--mallki span:nth-child(2)::before {
bottom: 0;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.link--mallki:hover span::before {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
/* Manko */
.link--manko {
color: #B1C0B2;
font-family: 'Playfair Display', serif;
font-weight: 900;
font-style: italic;
padding: 0.65em 0 0.8em;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
.link--manko:hover {
color: #1e1a1b;
}
.link--manko::before,
.link--manko::after {
content: '';
position: absolute;
border-width: 4px 0;
border-style: solid;
border-color: #fff;
pointer-events: none;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.link--manko::before {
width: 50%;
left: 25%;
height: 80%;
top: 10%;
}
.link--manko::after {
width: 30%;
left: 35%;
height: 100%;
top: 0;
}
.link--manko:hover::before,
.link--manko:hover::after {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.link--manko span {
color: #60AB64;
font-weight: 400;
position: absolute;
font-size: 0.2em;
left: 0;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.link--manko span:first-of-type {
bottom: 100%;
margin-bottom: 15px;
-webkit-transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
}
.link--manko span:last-of-type {
top: 100%;
margin-top: 10px;
-webkit-transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
}
.link--manko:hover span {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link--manko:hover span:first-of-type {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.link--manko:hover span:last-of-type {
-webkit-transition-delay: 0.20s;
transition-delay: 0.20s;
}
/* Ilin */
.link--ilin {
font-weight: 900;
text-transform: uppercase;
line-height: 0.8;
overflow: hidden;
color: #adaa88;
}
.link--ilin span {
position: relative;
display: inline-block;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
.link--ilin:hover span:first-of-type {
color: #fff;
}
.link--ilin:hover span:last-of-type {
color: #1e1a1b;
}
.link--ilin span::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
line-height: 0.8;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link--ilin span:last-of-type::before {
background: #1e1a1b;
}
.link--ilin:hover span:last-of-type::before,
.link--ilin span:first-of-type::before {
-webkit-transform: translate3d(0,-150%,0);
transform: translate3d(0,-150%,0);
}
.link--ilin:hover span:first-of-type::before,
.link--ilin span:last-of-type::before {
-webkit-transform: translate3d(0,150%,0);
transform: translate3d(0,150%,0);
}
/* Asiri */
.link--asiri {
position: relative;
width: 400px;
height: 200px;
}
.link--asiri .text-fill {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.link--asiri canvas {
width: 100%;
height: 100%;
}
.link--asiri .svg-inverted-mask {
position: absolute;
width: 400px;
height: 200px;
top: 0;
left: 0;
box-shadow: inset 0 0 0 2px #222; /* FF rendering issue */
}
.link--asiri .shape--fill {
fill: #222;
}
.link--asiri .text--transparent {
fill: #95D384;
-webkit-transition: fill 0.2s;
transition: fill 0.2s;
}
.link--asiri:hover .text--transparent {
fill: transparent;
}
.svg--asiri .mask__shape {
fill: white;
}
.text--asiri {
font-size: 150px;
text-transform: uppercase;
font-weight: 900;
stroke: #fff;
stroke-width: 1.5;
}
/* Yaku */
.link--yaku {
color: #D3D3D3;
font-family: 'Playfair Display';
font-weight: 400;
text-transform: uppercase;
font-size: 10em;
overflow: hidden;
padding: 0 0 10px;
}
.link--yaku::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
border-width: 2px 0;
border-color: #282828;
border-style: solid;
left: 0;
-webkit-transform: translate3d(-101%,0,0);
transform: translate3d(-101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link--yaku:hover::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link--yaku span {
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
}
.link--yaku:hover span {
color: #1e1a1b;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
transform: perspective(1000px) rotate3d(0,1,0,360deg);
}
.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.link--yaku span:first-child,
.link--yaku:hover span:nth-child(4) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
/* Media Queries */
@media screen and (max-width: 50em) {
.link--surinami { font-size: 3em; }
}
@media screen and (max-width: 42em) {
.link--takiri { font-size: 3.5em; }
.link--kukuri { font-size: 3.5em; }
.link--nukun { font-size: 3.5em; }
.link--kumya { font-size: 3em; }
.link--manko { font-size: 3.5em; }
.link--urpi { font-size: 5em; }
.link--mallki { font-size: 3.5em; }
.link--ilin { font-size: 5em; }
.link--asiri { -webkit-transform: scale3d(0.65,0.65,1); transform: scale3d(0.65,0.65,1); }
.link--yaku { font-size: 4em; }
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inspiration for Text Styles and Hover Effects</title>
<meta name="description" content="A set of modern text styles and hover effects for your inspiration" />
<meta name="keywords" content="text style, link style, link hover, effect, animation, inspiration, web design" />
<meta name="author" content="Codrops" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>/*FirefoxseemstohaveissuesloadingtheclippathfrominsidetheCSS*/.link--urpi::before{-webkit-clip-path:url(#cp_up);clip-path:url(#cp_up);}.link--urpi::after{-webkit-clip-path:url(#cp_down);clip-path:url(#cp_down);}</style></head><body><!--clippingmaskforstyle"Urpi" -->
<svg class="hidden" viewBox="0 0 310 160">
<defs>
<clippath id="cp_up">
<polygon id="cp_poly_up" points="0,0 310,0 310,160" />
</clippath>
<clippath id="cp_down">
<polygon id="cp_poly_down" points="0,0 0,160 310,160" />
</clippath>
</defs>
</svg>
<div class="grid__item color-5">
<a class="link link--urpi" href="#" data-letters="Urpi">Urpi</a>
</div>
</body>
</html>