"

From 2014.igem.org

---

Revision as of 09:30, 5 October 2014

.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

.ch-img-1 { background-image:url(); background-size: 100%; }

.ch-img-2 { background-image:url(); background-size: 100%; }

.ch-img-3 { background-image:url(); background-size: 100%; }

.ch-img-4 { background-image:url(); background-size: 100%; }

.ch-img-5 { background-image:url(); background-size: 100%; }

.ch-info { position: absolute; background: rgba(51,51,51, 0.8); width:inherit; height:inherit; border-radius: 50%; opacity: 0;

-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;

-webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0);

-webkit-backface-visibility: hidden;

}

.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 0px; padding: 45px 0 0 0; height: 100px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }

.ch-info p { color: #fff; padding: 5px 5px; font-style: italic; margin: -25px 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; -webkit-transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s; -ms-transition: all 1s ease-in-out 0.4s; transition: all 1s ease-in-out 0.4s; }

.ch-info p a { display: block; color: #fff; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; }

.ch-info p a:hover { color: #fff222; color: rgba(255,242,34, 0.8); }

.ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } .ch-item:hover .ch-info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }

.ch-item:hover .ch-info p { opacity: 1; }