/* Featured sites */ .avatar { height: 1.3em; width: 1.3em; display: inline-block; border-radius: 50%; vertical-align: text-top; margin: 0; background-color: #eee; vertical-align: middle; } .facepile { display: block; padding: 0 0 0 8px; } .facepile > a { display: inline-block; margin-left: -8px; transition: opacity .3s; opacity: .9; } .facepile > a:focus, .facepile > a:hover { opacity: 1; position: relative; z-index: 1; } .facepile .avatar { width: 30px; height: 30px; width: calc(30px + 5vw); height: calc(30px + 5vw); max-width: 60px; max-height: 60px; color: #fff; border: 2px solid; transition: border .3s; } .facepile > a:after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0; } .facepile > a:focus:after, .facepile > a:hover:after { left: -20px; right: -20px; top: -20px; bottom: -20px; opacity: .6; background-color: currentColor; background-image: linear-gradient(238deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff0080); background-size: 1200% 1200%; background-position: 0 80%; } .facepile > a:nth-child(11n+1):focus:after, .facepile > a:nth-child(11n+1):hover:after { background-position: 0% 80%; } .facepile > a:nth-child(11n+2):focus:after, .facepile > a:nth-child(11n+2):hover:after { background-position: 9% 80%; } .facepile > a:nth-child(11n+3):focus:after, .facepile > a:nth-child(11n+3):hover:after { background-position: 18% 80%; } .facepile > a:nth-child(11n+4):focus:after, .facepile > a:nth-child(11n+4):hover:after { background-position: 27% 80%; } .facepile > a:nth-child(11n+5):focus:after, .facepile > a:nth-child(11n+5):hover:after { background-position: 36% 80%; } .facepile > a:nth-child(11n+6):focus:after, .facepile > a:nth-child(11n+6):hover:after { background-position: 45% 80%; } .facepile > a:nth-child(11n+7):focus:after, .facepile > a:nth-child(11n+7):hover:after { background-position: 54% 80%; } .facepile > a:nth-child(11n+8):focus:after, .facepile > a:nth-child(11n+8):hover:after { background-position: 63% 80%; } .facepile > a:nth-child(11n+9):focus:after, .facepile > a:nth-child(11n+9):hover:after { background-position: 72% 80%; } .facepile > a:nth-child(11n+10):focus:after, .facepile > a:nth-child(11n+10):hover:after { background-position: 81% 80%; } .facepile > a:nth-child(11n+11):focus:after, .facepile > a:nth-child(11n+11):hover:after { background-position: 90% 80%; }