Template:Amoy/css/LinkComponentCss

.box { width: 230px; height: 340px; position: relative; background: rgba(255,255,255,1); display: inline-block; margin: 0 10px; cursor: pointer; color: #2c3e50; box-shadow: inset 0 0 0 3px #2c3e50; -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s; }

.box:hover { background: rgba(255,255,255,0); -webkit-transition-delay: 0s; transition-delay: 0s; }

.box h3 { font-family: "Ruthie", cursive; font-size: 180px; line-height: 250px; margin: 0; font-weight: 400; width: 100%;

       padding: 0px;

}

.box span { display: block; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 5px; }

.box h3, .box span { -webkit-transition: color 0.4s 0.5s; transition: color 0.4s 0.5s; }

.box:hover h3, .box:hover span { color: #fff; -webkit-transition-delay: 0s; transition-delay: 0s; }

.box svg { position: absolute; top: 0; left: 0; }

.box svg line { stroke-width: 3; stroke: #ecf0f1; fill: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; }

.box:hover svg line { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

.box svg line.top, .box svg line.bottom { stroke-dasharray: 260 170; }

.box svg line.left, .box svg line.right { stroke-dasharray: 370 280; }

.box:hover svg line.top { -webkit-transform: translateX(-460px); transform: translateX(-460px); }

.box:hover svg line.bottom { -webkit-transform: translateX(460px); transform: translateX(460px); }

.box:hover svg line.left { -webkit-transform: translateY(680px); transform: translateY(680px); }

.box:hover svg line.right { -webkit-transform: translateY(-680px); transform: translateY(-680px); }

/* Frame */ .demo-3 .box { background: rgba(0,0,0,0); color: #fff; box-shadow: none; -webkit-transition: background 0.3s; transition: background 0.3s; }

.demo-3 .box:hover { background: rgba(0,0,0,0.4); }

.demo-3 .box h3, .demo-3 .box span { -webkit-transition: none; transition: none; }

.demo-3 .box svg line { -webkit-transition: all .5s; transition: all .5s; }

.demo-3 .box:hover svg line { stroke-width: 10; -webkit-transition-delay: 0s; transition-delay: 0s; }

.demo-3 .box:hover svg line.top { -webkit-transform: translateX(-230px); transform: translateX(-230px); }

.demo-3 .box:hover svg line.bottom { -webkit-transform: translateX(230px); transform: translateX(230px); }

.demo-3 .box:hover svg line.left { -webkit-transform: translateY(340px); transform: translateY(340px); }

.demo-3 .box:hover svg line.right { -webkit-transform: translateY(-340px); transform: translateY(-340px); }