Skip to main content

CSS: Cicada Effect: add some wobble to your member avatar lists

I came across this article today that described an effect that one site uses to make their member avatars more distinctive looking:

http://www.lottejackson.com/le...ild-cicada-principle

If you like what they did there, here's some code for you to add to your own Crowdstack site that adds the "Cicada Effect" on your Members Directory and in widgets that displays grids of user avatars:

/* add blobbiness to member directory avatars */
#membersPage .h-member-box:nth-child(2n+1) img.member-avatar,
.h-members-grid:nth-child(2n+1) img.member-avatar,
.widget-box:nth-child(2n+1) img.avatar-list {
border-top-left-radius: 59%;
border-top-right-radius: 52%;
border-bottom-left-radius: 59%;
border-bottom-right-radius: 56%;
transform: rotate(-6deg);
}
#membersPage .h-member-box:nth-child(2n+1) img.member-avatar:hover,
.h-members-grid:nth-child(2n+1) img.member-avatar:hover,
.widget-box:nth-child(2n+1) img.avatar-list:hover {
border-top-left-radius: 51%;
border-top-right-radius: 67%;
border-bottom-left-radius: 64%;
border-bottom-right-radius: 56%;
transform: rotate(-4deg);
}

Ted @ Crowdstack
Last edited by Ted @ Crowdstack
Original Post
×
×
×