#contribute { width: 100%; padding: 30px 0; } #team, #team li { list-style-type: none; margin: 0; padding: 0; } #team { margin: 0 -10px; overflow: hidden; clear: both; } #team li { width: 140px; height: 140px; margin: 10px; float: left; border-radius: 120px; background: rgba(255,255,255,0.5); } #team li a img { width: 140px; height: 140px; border-radius: 120px; opacity: .7; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } #team li a:hover img { opacity: 1; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } #team li a { position: relative; display: block; } #team li a:after { width: 140px; height: 80px; display: block; position: absolute; top: 0; content: attr(title); background: rgb(208, 209, 104); background: rgba(208, 209, 104, 0.90); border-radius: 140px; text-align: center; padding: 60px 0px 0; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #434B5C; color: rgba(67,75,92,0.8); box-shadow: 0 0 0 1px rgba(208, 209, 104, 0.90), inset 0 0 0 1px rgba(208, 209, 104, 0.90); opacity: 0; } .wf-active #team li a:after { font-size: 13px; line-height: 1; font-weight: 700; } #team li a:hover:after { opacity: 1; } /* Transitions for Contributors block */ #team li a img, #team li a:hover img { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #team li a:after, #team li a:hover:after, { -webkit-transition: opacity .3s ease-out; -moz-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out; -ms-transition: opacity .3s ease-out; transition: opacity .3s ease-out; }