Template:IIT Kharagpur/team component

.box { width: 300px; height: 460px; position: relative; background: rgba(255,255,255,1); display: inline-block; margin: 0 10px; cursor: pointer; color: black; 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: 10px; line-height: 370px; margin: 0; font-weight: 400; width: 100%; }

.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: 330 240; }

.box svg line.left, .box svg line.right { stroke-dasharray: 490 400; }

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

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

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

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

/* Frame */ .demo-3 .box { background: rgba(0,0,0,0);

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(-300px); transform: translateX(-300px); }

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

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

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