"hover effect"
Bootstrap 3.3.0 Snippet by vishumini

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Captions Burst</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/figure.css"> <style> h2{ font-family: Roboto; font-size: 100px; text-align: left; font-weight: 100; color: #ccc; } h3{ font-family: Roboto; font-size: 60px; text-align: right; font-weight: 100; } </style> </head> <body> <div class="box-wrapper"> <h3 style="margin: 1em 0;">Triangle Side</h3> <div id="box" class="triangle-side teal"> <div class="caption"></div> <img src="images/image_01.jpg"> <h1>Lorem ipsum dolor sit amet</h1> </div> <div id="box" class="triangle-side strawberry"> <div class="caption"></div> <img src="images/image_02.jpg"> <h1>Lorem ipsum dolor sit amet</h1> </div> <div id="box" class="triangle-side grape"> <div class="caption"></div> <img src="images/image_03.jpg"> <h1>Lorem ipsum dolor sit amet</h1> </div> <div id="box" class="triangle-side orange"> <div class="caption"></div> <img src="images/image_04.jpg"> <h1>Lorem ipsum dolor sit amet</h1> </div> </div> </body> </html>
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .box-wrapper { position: relative; width: 1000px; margin: 0 auto; } #box { position: relative; width: 250px; height: 250px; overflow: hidden; cursor: pointer; float: left; } #box .caption{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 250px; height: 250px; z-index: 2; } .burst-circle:before{ position: absolute; content: ''; width: 100%; height: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 1; -webkit-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); transform: scale(0,0); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .teal:before{ background: rgba(0, 171, 169, 0.75); } .strawberry:before{ background: rgba(255, 0, 151, 0.75); } .grape:before{ background: rgba(162, 0, 255, 0.75); } .orange:before{ background: rgba(240, 150, 9, 0.75); } .burst-circle:hover:before{ -webkit-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } .burst-circle .caption { background: url(../images/burst.png) no-repeat; background-position: 0 0; -webkit-animation: capcircleout 0.75s steps(20) forwards; -o-animation: capcircleout 0.75s steps(20) forwards; animation: capcircleout 0.75s steps(20) forwards; } .burst-circle:hover .caption { -webkit-animation: capcirclein 0.75s steps(20) forwards; -o-animation: capcirclein 0.75s steps(20) forwards; animation: capcirclein 0.75s steps(20) forwards; } @-webkit-keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @-o-keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @-moz-keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @-webkit-keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } @-o-keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } @-moz-keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } @keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } .burst-circle img{ position: relative; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-circle:hover img{ -webkit-transform: scale(2,2) translateX(-50%) rotate(10deg); -ms-transform: scale(2,2) translateX(-50%) rotate(10deg); -o-transform: scale(2,2) translateX(-50%) rotate(10deg); transform: scale(2,2) translateX(-50%) rotate(10deg); } .burst-circle h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-circle:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .burst-rumb:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; -webkit-transform: scale(0,0) rotate(45deg); -ms-transform: scale(0,0) rotate(45deg); -o-transform: scale(0,0) rotate(45deg); transform: scale(0,0) rotate(45deg); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .burst-rumb:hover:before{ -webkit-transform: scale(1.5,1.5) rotate(45deg); -ms-transform: scale(1.5,1.5) rotate(45deg); -o-transform: scale(1.5,1.5) rotate(45deg); transform: scale(1.5,1.5) rotate(45deg); } .burst-rumb .caption { background: url(../images/rumb_burst.png) no-repeat; background-position: 0 0; -webkit-animation: caprumbout 1s steps(25) forwards; -o-animation: caprumbout 1s steps(25) forwards; animation: caprumbout 1s steps(25) forwards; } .burst-rumb:hover .caption { -webkit-animation: caprumbin 1s steps(25) forwards; -o-animation: caprumbin 1s steps(25) forwards; animation: caprumbin 1s steps(25) forwards; } @-webkit-keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @-o-keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @-moz-keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @-webkit-keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } @-o-keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } @-moz-keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } @keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } .burst-rumb img{ position: relative; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-rumb:hover img{ -webkit-transform: scale(2,2) translateX(-50%) rotate(10deg); -ms-transform: scale(2,2) translateX(-50%) rotate(10deg); -o-transform: scale(2,2) translateX(-50%) rotate(10deg); transform: scale(2,2) translateX(-50%) rotate(10deg); } .burst-rumb h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-rumb:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .burst-up:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .burst-up:hover:before{ -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform:translateY(0%); transform: translateY(0%); } .burst-up .caption { background: url(../images/up_burst.png) no-repeat; background-position: 0 0; -webkit-animation: capupout 0.68s steps(17) forwards; -o-animation: capupout 0.68s steps(17) forwards; animation: capupout 0.68s steps(17) forwards; } .burst-up:hover .caption { -webkit-animation: capupin 0.68s steps(17) forwards; -o-animation: capupin 0.68s steps(17) forwards; animation: capupin 0.68s steps(17) forwards; } @-webkit-keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-o-keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-moz-keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-webkit-keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-o-keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-moz-keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } .burst-up img{ position: relative; top: 98%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-up:hover img{ top: 50%; } .burst-up h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-up:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .burst-side:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .burst-side:hover:before{ -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform:translateX(0%); transform: translateX(0%); } .burst-side .caption { background: url(../images/up_burst.png) no-repeat; background-position: 0 0; -webkit-animation: capsideout 0.68s steps(17) forwards; -o-animation: capsideout 0.68s steps(17) forwards; animation: capsideout 0.68s steps(17) forwards; -webkit-transform: rotate(90deg); -ms-transform: translateX(90deg); -o-transform:translateX(90deg); transform: translateX(90deg); } .burst-side:hover .caption { -webkit-animation: capsidein 0.68s steps(17) forwards; -o-animation: capsidein 0.68s steps(17) forwards; animation: capsidein 0.68s steps(17) forwards; } @-webkit-keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-o-keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-moz-keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-webkit-keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-o-keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-moz-keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } .burst-side img{ position: relative; top: 98%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-side:hover img{ top: 50%; } .burst-side h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-100%,-50%); -ms-transform: translate(-100%,-50%); -o-transform: translate(-100%,-50%); transform: translate(-100%,-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-side:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .triangle:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 500ms ease-in 150ms; -o-transition: all 500ms ease-in 150ms; transition: all 500ms ease-in 150ms; } .triangle:hover:before{ opacity: 1; } .triangle .caption { background: url(../images/triangle.png) no-repeat; background-position: 0 0; -webkit-animation: captriangleout 0.75s steps(30) forwards; -o-animation: captriangleout 0.75s steps(30) forwards; animation: captriangleout 0.75s steps(30) forwards; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); } .triangle:hover .caption { -webkit-animation: captrianglein 0.75s steps(30) forwards; -o-animation: captrianglein 0.75s steps(30) forwards; animation: captrianglein 0.75s steps(30) forwards; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } @-webkit-keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-o-keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-moz-keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-webkit-keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-o-keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-moz-keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } .triangle img{ position: relative; top: 50%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .triangle:hover img{ top: 98%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); } .triangle h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; } .triangle:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .triangle-side:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 500ms ease-in 150ms; -o-transition: all 500ms ease-in 150ms; transition: all 500ms ease-in 150ms; } .triangle-side:hover:before{ opacity: 1; } .triangle-side .caption { background: url(../images/triangle.png) no-repeat; background-position: 0 0; -webkit-animation: captriangle-sideout 0.75s steps(30) forwards; -o-animation: captriangle-sideout 0.75s steps(30) forwards; animation: captriangle-sideout 0.75s steps(30) forwards; -webkit-transform: scaleX(-1) rotate(90deg); -ms-transform: scaleX(-1) rotate(90deg); -o-transform: scaleX(-1) rotate(90deg); transform: scaleX(-1) rotate(90deg); } .triangle-side:hover .caption { -webkit-animation: captriangle-sidein 0.75s steps(30) forwards; -o-animation: captriangle-sidein 0.75s steps(30) forwards; animation: captriangle-sidein 0.75s steps(30) forwards; -webkit-transform: scaleX(1) rotate(90deg); -ms-transform: scaleX(1) rotate(90deg); -o-transform: scaleX(1) rotate(90deg); transform: scaleX(1) rotate(90deg); } @-webkit-keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-o-keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-moz-keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-webkit-keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-o-keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-moz-keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } .triangle-side img{ position: relative; top: 50%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .triangle-side:hover img{ top: 98%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); } .triangle-side h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-100%,-50%); -ms-transform: translate(-100%,-50%); -o-transform: translate(-100%,-50%); transform: translate(-100%,-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; } .triangle-side:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .box-wrapper { position: relative; width: 1000px; margin: 0 auto; } #box { position: relative; width: 250px; height: 250px; overflow: hidden; cursor: pointer; float: left; } #box .caption{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 250px; height: 250px; z-index: 2; } .burst-circle:before{ position: absolute; content: ''; width: 100%; height: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 1; -webkit-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); transform: scale(0,0); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .teal:before{ background: rgba(0, 171, 169, 0.75); } .strawberry:before{ background: rgba(255, 0, 151, 0.75); } .grape:before{ background: rgba(162, 0, 255, 0.75); } .orange:before{ background: rgba(240, 150, 9, 0.75); } .burst-circle:hover:before{ -webkit-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); } .burst-circle .caption { background: url(../images/burst.png) no-repeat; background-position: 0 0; -webkit-animation: capcircleout 0.75s steps(20) forwards; -o-animation: capcircleout 0.75s steps(20) forwards; animation: capcircleout 0.75s steps(20) forwards; } .burst-circle:hover .caption { -webkit-animation: capcirclein 0.75s steps(20) forwards; -o-animation: capcirclein 0.75s steps(20) forwards; animation: capcirclein 0.75s steps(20) forwards; } @-webkit-keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @-o-keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @-moz-keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @keyframes capcirclein { from { background-position: 0 0; } to { background-position: -5000px 0; } } @-webkit-keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } @-o-keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } @-moz-keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } @keyframes capcircleout { from { background-position: -5000px 0; } to { background-position: 0px 0; } } .burst-circle img{ position: relative; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-circle:hover img{ -webkit-transform: scale(2,2) translateX(-50%) rotate(10deg); -ms-transform: scale(2,2) translateX(-50%) rotate(10deg); -o-transform: scale(2,2) translateX(-50%) rotate(10deg); transform: scale(2,2) translateX(-50%) rotate(10deg); } .burst-circle h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-circle:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .burst-rumb:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; -webkit-transform: scale(0,0) rotate(45deg); -ms-transform: scale(0,0) rotate(45deg); -o-transform: scale(0,0) rotate(45deg); transform: scale(0,0) rotate(45deg); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .burst-rumb:hover:before{ -webkit-transform: scale(1.5,1.5) rotate(45deg); -ms-transform: scale(1.5,1.5) rotate(45deg); -o-transform: scale(1.5,1.5) rotate(45deg); transform: scale(1.5,1.5) rotate(45deg); } .burst-rumb .caption { background: url(../images/rumb_burst.png) no-repeat; background-position: 0 0; -webkit-animation: caprumbout 1s steps(25) forwards; -o-animation: caprumbout 1s steps(25) forwards; animation: caprumbout 1s steps(25) forwards; } .burst-rumb:hover .caption { -webkit-animation: caprumbin 1s steps(25) forwards; -o-animation: caprumbin 1s steps(25) forwards; animation: caprumbin 1s steps(25) forwards; } @-webkit-keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @-o-keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @-moz-keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @keyframes caprumbin { from { background-position: 0 0; } to { background-position: -6250px 0; } } @-webkit-keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } @-o-keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } @-moz-keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } @keyframes caprumbout { from { background-position: -6250px 0; } to { background-position: 0px 0; } } .burst-rumb img{ position: relative; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-rumb:hover img{ -webkit-transform: scale(2,2) translateX(-50%) rotate(10deg); -ms-transform: scale(2,2) translateX(-50%) rotate(10deg); -o-transform: scale(2,2) translateX(-50%) rotate(10deg); transform: scale(2,2) translateX(-50%) rotate(10deg); } .burst-rumb h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-rumb:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .burst-up:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .burst-up:hover:before{ -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform:translateY(0%); transform: translateY(0%); } .burst-up .caption { background: url(../images/up_burst.png) no-repeat; background-position: 0 0; -webkit-animation: capupout 0.68s steps(17) forwards; -o-animation: capupout 0.68s steps(17) forwards; animation: capupout 0.68s steps(17) forwards; } .burst-up:hover .caption { -webkit-animation: capupin 0.68s steps(17) forwards; -o-animation: capupin 0.68s steps(17) forwards; animation: capupin 0.68s steps(17) forwards; } @-webkit-keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-o-keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-moz-keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @keyframes capupin { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-webkit-keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-o-keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-moz-keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @keyframes capupout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } .burst-up img{ position: relative; top: 98%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-up:hover img{ top: 50%; } .burst-up h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-up:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .burst-side:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; } .burst-side:hover:before{ -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform:translateX(0%); transform: translateX(0%); } .burst-side .caption { background: url(../images/up_burst.png) no-repeat; background-position: 0 0; -webkit-animation: capsideout 0.68s steps(17) forwards; -o-animation: capsideout 0.68s steps(17) forwards; animation: capsideout 0.68s steps(17) forwards; -webkit-transform: rotate(90deg); -ms-transform: translateX(90deg); -o-transform:translateX(90deg); transform: translateX(90deg); } .burst-side:hover .caption { -webkit-animation: capsidein 0.68s steps(17) forwards; -o-animation: capsidein 0.68s steps(17) forwards; animation: capsidein 0.68s steps(17) forwards; } @-webkit-keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-o-keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-moz-keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @keyframes capsidein { from { background-position: 0 0; } to { background-position: -4250px 0; } } @-webkit-keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-o-keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @-moz-keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } @keyframes capsideout { from { background-position: -4250px 0; } to { background-position: 0px 0; } } .burst-side img{ position: relative; top: 98%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .burst-side:hover img{ top: 50%; } .burst-side h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-100%,-50%); -ms-transform: translate(-100%,-50%); -o-transform: translate(-100%,-50%); transform: translate(-100%,-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms; } .burst-side:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .triangle:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 500ms ease-in 150ms; -o-transition: all 500ms ease-in 150ms; transition: all 500ms ease-in 150ms; } .triangle:hover:before{ opacity: 1; } .triangle .caption { background: url(../images/triangle.png) no-repeat; background-position: 0 0; -webkit-animation: captriangleout 0.75s steps(30) forwards; -o-animation: captriangleout 0.75s steps(30) forwards; animation: captriangleout 0.75s steps(30) forwards; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); } .triangle:hover .caption { -webkit-animation: captrianglein 0.75s steps(30) forwards; -o-animation: captrianglein 0.75s steps(30) forwards; animation: captrianglein 0.75s steps(30) forwards; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } @-webkit-keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-o-keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-moz-keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @keyframes captrianglein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-webkit-keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-o-keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-moz-keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @keyframes captriangleout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } .triangle img{ position: relative; top: 50%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .triangle:hover img{ top: 98%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); } .triangle h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); transform: translate(-50%,100%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; } .triangle:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .triangle-side:before{ position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: all 500ms ease-in 150ms; -o-transition: all 500ms ease-in 150ms; transition: all 500ms ease-in 150ms; } .triangle-side:hover:before{ opacity: 1; } .triangle-side .caption { background: url(../images/triangle.png) no-repeat; background-position: 0 0; -webkit-animation: captriangle-sideout 0.75s steps(30) forwards; -o-animation: captriangle-sideout 0.75s steps(30) forwards; animation: captriangle-sideout 0.75s steps(30) forwards; -webkit-transform: scaleX(-1) rotate(90deg); -ms-transform: scaleX(-1) rotate(90deg); -o-transform: scaleX(-1) rotate(90deg); transform: scaleX(-1) rotate(90deg); } .triangle-side:hover .caption { -webkit-animation: captriangle-sidein 0.75s steps(30) forwards; -o-animation: captriangle-sidein 0.75s steps(30) forwards; animation: captriangle-sidein 0.75s steps(30) forwards; -webkit-transform: scaleX(1) rotate(90deg); -ms-transform: scaleX(1) rotate(90deg); -o-transform: scaleX(1) rotate(90deg); transform: scaleX(1) rotate(90deg); } @-webkit-keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-o-keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-moz-keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @keyframes captriangle-sidein { from { background-position: 0 0; } to { background-position: -7500px 0; } } @-webkit-keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-o-keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @-moz-keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } @keyframes captriangle-sideout { from { background-position: 0px 0; } to { background-position: -7500px 0; } } .triangle-side img{ position: relative; top: 50%; left: 50%; min-width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .triangle-side:hover img{ top: 98%; -webkit-transform: scale(1.5,1.5) translate(-50%, -50%); -ms-transform: scale(1.5,1.5) translate(-50%, -50%); -o-transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); transform: scale(1.5,1.5) translate(-50%, -50%); } .triangle-side h1 { position: absolute; left: 50%; top: 50%; font-size: 30px; line-height: 30px; font-family: Roboto; z-index: 3; width: 75%; color: rgba(242, 242, 242, 0); text-align: center; font-weight: 300; -webkit-transform: translate(-100%,-50%); -ms-transform: translate(-100%,-50%); -o-transform: translate(-100%,-50%); transform: translate(-100%,-50%); -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 500ms; } .triangle-side:hover h1 { color: #f2f2f2; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

Related: See More


Questions / Comments: