"
Team:BIT/style4.css
From 2014.igem.org
.ch-item2:before { content: ;
display: table;
}
.ch-item2 { width: 180px; height: 180px; 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-21 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-22 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-23 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-24 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-info2 { position: absolute; background: rgba(63,147,147, 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-info2 h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 50px 0 0 40px ;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.ch-info2 p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 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-item2:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } .ch-item2:hover .ch-info2 { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
.ch-item2:hover .ch-info2 p { opacity: 1; }
