In this Blog, we are going to learn how to create Circle Hover Effects with CSS Transitions using CSS and HTML.
First of all, create an HTML File
HTML File : index.html
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%20%20%20%20%3Chead%3E%0D%0A%09%09%3Cmeta%20charset%3D%22UTF-8%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%22X-UA-Compatible%22%20content%3D%22IE%3Dedge%2Cchrome%3D1%22%3E%20%0D%0A%09%09%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%20%0D%0A%20%20%20%20%20%20%20%20%3Ctitle%3ECircle%20Hover%20Effects%20with%20CSS%20Transitions%3C%2Ftitle%3E%0D%0A%20%20%20%20%20%20%20%20%3Cmeta%20name%3D%22description%22%20content%3D%22Circle%20Hover%20Effects%20with%20CSS%20Transitions%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3Cmeta%20name%3D%22keywords%22%20content%3D%22circle%2C%20border-radius%2C%20hover%2C%20css3%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3Cmeta%20name%3D%22author%22%20content%3D%22%22%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3Clink%20rel%3D%22shortcut%20icon%22%20href%3D%22..%2Ffavicon.ico%22%3E%20%0D%0A%20%20%20%20%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22css%2Fstyle7.css%22%20%2F%3E%0D%0A%09%09%3Clink%20href%3D’http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DOpen%2BSans%3A300%2C700’%20rel%3D’stylesheet’%20type%3D’text%2Fcss’%20%2F%3E%0D%0A%09%09%3C!–%5Bif%20lte%20IE%208%5D%3E%3Cstyle%3E.main%7Bdisplay%3Anone%3B%7D%20.support-note%20.note-ie%7Bdisplay%3Ablock%3B%7D%3C%2Fstyle%3E%3C!%5Bendif%5D–%3E%0D%0A%20%20%20%20%3C%2Fhead%3E%0D%0A%20%20%20%20%3Cbody%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22container%22%3E%09%09%09%0D%0A%09%09%09%3Cheader%3E%0D%0A%09%09%09%09%3Ch1%3E%3Cstrong%3ECircle%3C%2Fstrong%3E%20Hover%20Effects%3C%2Fh1%3E%0D%0A%09%09%09%09%3Ch2%3EHover%20effects%20on%20circles%20with%20CSS%20Transitions%3C%2Fh2%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fheader%3E%0D%0A%09%09%09%0D%0A%09%09%09%3Csection%20class%3D%22main%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cul%20class%3D%22ch-grid%22%3E%0D%0A%09%09%09%09%09%3Cli%3E%0D%0A%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-item%22%3E%09%09%09%09%0D%0A%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info%22%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info-front%20ch-img-1%22%3E%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info-back%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Ch3%3ETeam%3C%2Fh3%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cp%3ETeam%20Designation%20%3Ca%20href%3D%22%22%3EView%20on%20Facebook%3C%2Fa%3E%3C%2Fp%3E%0D%0A%09%09%09%09%09%09%09%09%3C%2Fdiv%3E%09%0D%0A%09%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%3C%2Fli%3E%0D%0A%09%09%09%09%09%3Cli%3E%0D%0A%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-item%22%3E%0D%0A%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info%22%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info-front%20ch-img-2%22%3E%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info-back%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Ch3%3ETeam%3C%2Fh3%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cp%3ETeam%20Designation%20%3Ca%20href%3D%22%22%3EView%20on%20Facebook%3C%2Fa%3E%3C%2Fp%3E%0D%0A%09%09%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%3C%2Fli%3E%0D%0A%09%09%09%09%09%3Cli%3E%0D%0A%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-item%22%3E%0D%0A%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info%22%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info-front%20ch-img-3%22%3E%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22ch-info-back%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Ch3%3ETeam%3C%2Fh3%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cp%3ETeam%20Designation%20%3Ca%20href%3D%22%22%3EView%20on%20Facebook%3C%2Fa%3E%3C%2Fp%3E%0D%0A%09%09%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%09%3C%2Fli%3E%0D%0A%09%09%09%09%3C%2Ful%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fsection%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
CSS File : style.css
[pastacode manual=”%40import%20url(‘normalize.css’)%3B%0D%0A%0D%0A%2F*%20General%20Demo%20Style%20*%2F%0D%0Abody%7B%0D%0A%09font-family%3A%20Cambria%2C%20Georgia%2C%20serif%3B%0D%0A%09background%3A%20linear-gradient(to%20right%2Crgba(2%2C52%2C55%2C1)%200%2Crgba(6%2C151%2C158%2C1)%20100%25)%3B%0D%0A%09font-weight%3A%20300%3B%0D%0A%09font-size%3A%2015px%3B%0D%0A%09color%3A%20%23333%3B%0D%0A%09-webkit-font-smoothing%3A%20antialiased%3B%0D%0A%09overflow-y%3A%20scroll%3B%0D%0A%09overflow-x%3A%20hidden%3B%0D%0A%7D%0D%0Aa%7B%0D%0A%09color%3A%20%23555%3B%0D%0A%09text-decoration%3A%20none%3B%0D%0A%7D%0D%0A.container%7B%0D%0A%09width%3A%20100%25%3B%0D%0A%09position%3A%20relative%3B%0D%0A%09margin-top%3A8%25%3B%0D%0A%7D%0D%0A.clr%7B%0D%0A%09clear%3A%20both%3B%0D%0A%09padding%3A%200%3B%0D%0A%09height%3A%200%3B%0D%0A%09margin%3A%200%3B%0D%0A%7D%0D%0A.main%7B%0D%0A%09width%3A%2090%25%3B%0D%0A%09margin%3A%200%20auto%3B%0D%0A%09position%3A%20relative%3B%0D%0A%7D%0D%0A.container%20%3E%20header%7B%0D%0A%09margin%3A%2010px%3B%0D%0A%09padding%3A%2020px%2010px%2010px%2010px%3B%0D%0A%09position%3A%20relative%3B%0D%0A%09display%3A%20block%3B%0D%0A%09text-shadow%3A%201px%201px%201px%20rgba(0%2C0%2C0%2C0.2)%3B%0D%0A%20%20%20%20text-align%3A%20center%3B%0D%0A%7D%0D%0A.container%20%3E%20header%20h1%7B%0D%0A%09font-size%3A%2042px%3B%0D%0A%09line-height%3A%2032px%3B%0D%0A%09margin%3A%200%3B%0D%0A%09position%3A%20relative%3B%0D%0A%09font-weight%3A%20300%3B%0D%0A%09color%3A%20%23fff%3B%0D%0A%7D%0D%0A.container%20%3E%20header%20h2%7B%0D%0A%09font-size%3A%2018px%3B%0D%0A%09font-weight%3A%20300%3B%0D%0A%09font-style%3A%20italic%3B%0D%0A%09margin%3A%200%3B%0D%0A%09padding%3A%2015px%200%205px%200%3B%0D%0A%09color%3A%20%23fff%3B%0D%0A%7D%0D%0A%2F*%20Header%20Style%20*%2F%0D%0A.codrops-top%7B%0D%0A%09line-height%3A%2024px%3B%0D%0A%09font-size%3A%2011px%3B%0D%0A%09background%3A%20%23fff%3B%0D%0A%09background%3A%20rgba(255%2C%20255%2C%20255%2C%200.6)%3B%0D%0A%09text-transform%3A%20uppercase%3B%0D%0A%09z-index%3A%209999%3B%0D%0A%09position%3A%20relative%3B%0D%0A%09box-shadow%3A%201px%200px%202px%20rgba(0%2C0%2C0%2C0.1)%3B%0D%0A%7D%0D%0A.codrops-top%20a%7B%0D%0A%09padding%3A%200px%2010px%3B%0D%0A%09letter-spacing%3A%201px%3B%0D%0A%09color%3A%20%23333%3B%0D%0A%09display%3A%20inline-block%3B%0D%0A%7D%0D%0A.codrops-top%20a%3Ahover%7B%0D%0A%09background%3A%20rgba(255%2C255%2C255%2C0.3)%3B%0D%0A%7D%0D%0A.codrops-top%20span.right%7B%0D%0A%09float%3A%20right%3B%0D%0A%7D%0D%0A.codrops-top%20span.right%20a%7B%0D%0A%09float%3A%20left%3B%0D%0A%09display%3A%20block%3B%0D%0A%7D%0D%0A%2F*%20Demo%20Buttons%20Style%20*%2F%0D%0A.codrops-demos%7B%0D%0A%20%20%20%20text-align%3Acenter%3B%0D%0A%09display%3A%20block%3B%0D%0A%09line-height%3A%2030px%3B%0D%0A%09padding%3A%205px%200px%3B%0D%0A%7D%0D%0A.codrops-demos%20a%7B%0D%0A%20%20%20%20display%3A%20inline-block%3B%0D%0A%09font-style%3A%20italic%3B%0D%0A%09margin%3A%200px%204px%3B%0D%0A%09padding%3A%200px%206px%3B%0D%0A%09color%3A%20%23aaa%3B%0D%0A%09line-height%3A%2020px%3B%09%0D%0A%09font-size%3A%2013px%3B%0D%0A%09text-shadow%3A%201px%201px%201px%20%23fff%3B%0D%0A%09border%3A%201px%20solid%20%23fff%3B%0D%0A%09background%3A%20%23ffffff%3B%20%2F*%20Old%20browsers%20*%2F%0D%0A%09background%3A%20-moz-linear-gradient(top%2C%20%23ffffff%200%25%2C%20%23f6f6f6%2047%25%2C%20%23ededed%20100%25)%3B%20%2F*%20FF3.6%2B%20*%2F%0D%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20color-stop(0%25%2C%23ffffff)%2C%20color-stop(47%25%2C%23f6f6f6)%2C%20color-stop(100%25%2C%23ededed))%3B%20%2F*%20Chrome%2CSafari4%2B%20*%2F%0D%0A%09background%3A%20-webkit-linear-gradient(top%2C%20%23ffffff%200%25%2C%23f6f6f6%2047%25%2C%23ededed%20100%25)%3B%20%2F*%20Chrome10%2B%2CSafari5.1%2B%20*%2F%0D%0A%09background%3A%20-o-linear-gradient(top%2C%20%23ffffff%200%25%2C%23f6f6f6%2047%25%2C%23ededed%20100%25)%3B%20%2F*%20Opera%2011.10%2B%20*%2F%0D%0A%09background%3A%20-ms-linear-gradient(top%2C%20%23ffffff%200%25%2C%23f6f6f6%2047%25%2C%23ededed%20100%25)%3B%20%2F*%20IE10%2B%20*%2F%0D%0A%09background%3A%20linear-gradient(top%2C%20%23ffffff%200%25%2C%23f6f6f6%2047%25%2C%23ededed%20100%25)%3B%20%2F*%20W3C%20*%2F%0D%0A%09filter%3A%20progid%3ADXImageTransform.Microsoft.gradient(%20startColorstr%3D’%23ffffff’%2C%20endColorstr%3D’%23ededed’%2CGradientType%3D0%20)%3B%20%2F*%20IE6-9%20*%2F%0D%0A%09box-shadow%3A%200%201px%201px%20rgba(0%2C%200%2C%200%2C%200.1)%3B%0D%0A%7D%0D%0A.codrops-demos%20a%3Ahover%7B%0D%0A%09color%3A%20%23333%3B%0D%0A%09background%3A%20%23fff%3B%0D%0A%7D%0D%0A.codrops-demos%20a%3Aactive%7B%0D%0A%09background%3A%20%23fff%3B%0D%0A%7D%0D%0A.codrops-demos%20a.current-demo%2C%0D%0A.codrops-demos%20a.current-demo%3Ahover%7B%0D%0A%09background%3A%20%23f0f0f0%3B%0D%0A%09border-color%3A%20%23d9d9d9%3B%0D%0A%09color%3A%20%23aaa%3B%0D%0A%09box-shadow%3A%200%201px%201px%20rgba(255%2C255%2C255%2C0.7)%3B%0D%0A%09filter%3A%20progid%3ADXImageTransform.Microsoft.gradient(%20startColorstr%3D’%23f6f6f6’%2C%20endColorstr%3D’%23f6f6f6’%2CGradientType%3D0%20)%3B%20%2F*%20IE6-9%20*%2F%0D%0A%7D%0D%0A%0D%0A.support-note%20span%7B%0D%0A%09color%3A%20%23ac375d%3B%0D%0A%09font-size%3A%2016px%3B%0D%0A%09display%3A%20none%3B%0D%0A%09font-weight%3A%20bold%3B%0D%0A%09text-align%3A%20center%3B%0D%0A%09padding%3A%205px%200%3B%0D%0A%7D%0D%0A.no-cssanimations%20.support-note%20span.no-cssanimations%2C%0D%0A.no-csstransforms%20.support-note%20span.no-csstransforms%2C%0D%0A.no-csstransforms3d%20.support-note%20span.no-csstransforms3d%2C%0D%0A.no-csstransitions%20.support-note%20span.no-csstransitions%7B%0D%0A%09display%3A%20block%3B%0D%0A%7D%0D%0A%0D%0A.ch-item%20%7B%0D%0A%09width%3A%20100%25%3B%0D%0A%09height%3A%20100%25%3B%0D%0A%09border-radius%3A%2050%25%3B%0D%0A%09position%3A%20relative%3B%0D%0A%09cursor%3A%20default%3B%0D%0A%09-webkit-perspective%3A%20900px%3B%0D%0A%09-moz-perspective%3A%20900px%3B%0D%0A%09-o-perspective%3A%20900px%3B%0D%0A%09-ms-perspective%3A%20900px%3B%0D%0A%09perspective%3A%20900px%3B%0D%0A%7D%0D%0A.ch-info%7B%0D%0A%09position%3A%20absolute%3B%0D%0A%09width%3A%20100%25%3B%0D%0A%09height%3A%20100%25%3B%0D%0A%09-webkit-transform-style%3A%20preserve-3d%3B%0D%0A%09-moz-transform-style%3A%20preserve-3d%3B%0D%0A%09-o-transform-style%3A%20preserve-3d%3B%0D%0A%09-ms-transform-style%3A%20preserve-3d%3B%0D%0A%09transform-style%3A%20preserve-3d%3B%0D%0A%7D%0D%0A.ch-info%20%3E%20div%20%7B%0D%0A%09display%3A%20block%3B%0D%0A%09position%3A%20absolute%3B%0D%0A%09width%3A%20100%25%3B%0D%0A%09height%3A%20100%25%3B%0D%0A%09border-radius%3A%2050%25%3B%0D%0A%09background-position%3A%20center%20center%3B%0D%0A%09-webkit-transition%3A%20all%200.4s%20linear%3B%0D%0A%09-moz-transition%3A%20all%200.4s%20linear%3B%0D%0A%09-o-transition%3A%20all%200.4s%20linear%3B%0D%0A%09-ms-transition%3A%20all%200.4s%20linear%3B%0D%0A%09transition%3A%20all%200.4s%20linear%3B%0D%0A%09-webkit-transform-origin%3A%2050%25%200%25%3B%0D%0A%09-moz-transform-origin%3A%2050%25%200%25%3B%0D%0A%09-o-transform-origin%3A%2050%25%200%25%3B%0D%0A%09-ms-transform-origin%3A%2050%25%200%25%3B%0D%0A%09transform-origin%3A%2050%25%200%25%3B%0D%0A%7D%0D%0A%0D%0A.ch-info%20.ch-info-front%20%7B%0D%0A%09box-shadow%3A%20inset%200%200%200%2016px%20rgba(0%2C0%2C0%2C0.3)%3B%0D%0A%7D%0D%0A%0D%0A.ch-info%20.ch-info-back%20%7B%0D%0A%09-webkit-transform%3A%20translate3d(0%2C0%2C-220px)%20rotate3d(1%2C0%2C0%2C90deg)%3B%0D%0A%09-moz-transform%3A%20translate3d(0%2C0%2C-220px)%20rotate3d(1%2C0%2C0%2C90deg)%3B%0D%0A%09-o-transform%3A%20translate3d(0%2C0%2C-220px)%20rotate3d(1%2C0%2C0%2C90deg)%3B%0D%0A%09-ms-transform%3A%20translate3d(0%2C0%2C-220px)%20rotate3d(1%2C0%2C0%2C90deg)%3B%0D%0A%09transform%3A%20translate3d(0%2C0%2C-220px)%20rotate3d(1%2C0%2C0%2C90deg)%3B%0D%0A%09background%3A%20%23000%3B%0D%0A%09opacity%3A%200%3B%0D%0A%7D%0D%0A%0D%0A.ch-img-1%20%7B%20%0D%0A%09background-image%3A%20url(..%2Fimages%2F2.jpg)%3B%0D%0A%7D%0D%0A%0D%0A.ch-img-2%20%7B%20%0D%0A%09background-image%3A%20url(..%2Fimages%2F7.jpg)%3B%0D%0A%7D%0D%0A%0D%0A.ch-img-3%20%7B%20%0D%0A%09background-image%3A%20url(..%2Fimages%2F10.jpg)%3B%0D%0A%7D%0D%0A%0D%0A.ch-info%20h3%20%7B%0D%0A%09color%3A%20%23fff%3B%0D%0A%09text-transform%3A%20uppercase%3B%0D%0A%09letter-spacing%3A%202px%3B%0D%0A%09font-size%3A%2024px%3B%0D%0A%09margin%3A%200%2015px%3B%0D%0A%09padding%3A%2060px%200%200%200%3B%0D%0A%09height%3A%20110px%3B%0D%0A%09font-family%3A%20’Open%20Sans’%2C%20Arial%2C%20sans-serif%3B%0D%0A%09text-shadow%3A%20%0D%0A%09%090%200%201px%20%23fff%2C%20%0D%0A%09%090%201px%202px%20rgba(0%2C0%2C0%2C0.3)%3B%0D%0A%7D%0D%0A%0D%0A.ch-info%20p%20%7B%0D%0A%09color%3A%20%23fff%3B%0D%0A%09padding%3A%2010px%205px%3B%0D%0A%09font-style%3A%20italic%3B%0D%0A%09margin%3A%200%2030px%3B%0D%0A%09font-size%3A%2012px%3B%0D%0A%09border-top%3A%201px%20solid%20rgba(255%2C255%2C255%2C0.5)%3B%0D%0A%7D%0D%0A%0D%0A.ch-info%20p%20a%20%7B%0D%0A%09display%3A%20block%3B%0D%0A%09color%3A%20%23fff%3B%0D%0A%09color%3A%20rgba(255%2C255%2C255%2C0.7)%3B%0D%0A%09font-style%3A%20normal%3B%0D%0A%09font-weight%3A%20700%3B%0D%0A%09text-transform%3A%20uppercase%3B%0D%0A%09font-size%3A%209px%3B%0D%0A%09letter-spacing%3A%201px%3B%0D%0A%09padding-top%3A%204px%3B%0D%0A%09font-family%3A%20’Open%20Sans’%2C%20Arial%2C%20sans-serif%3B%0D%0A%7D%0D%0A%0D%0A.ch-info%20p%20a%3Ahover%20%7B%0D%0A%09color%3A%20%23fff222%3B%0D%0A%09color%3A%20rgba(255%2C242%2C34%2C%200.8)%3B%0D%0A%7D%0D%0A%0D%0A.ch-item%3Ahover%20.ch-info-front%20%7B%0D%0A%09-webkit-transform%3A%20translate3d(0%2C280px%2C0)%20rotate3d(1%2C0%2C0%2C-90deg)%3B%0D%0A%09-moz-transform%3A%20translate3d(0%2C280px%2C0)%20rotate3d(1%2C0%2C0%2C-90deg)%3B%0D%0A%09-o-transform%3A%20translate3d(0%2C280px%2C0)%20rotate3d(1%2C0%2C0%2C-90deg)%3B%0D%0A%09-ms-transform%3A%20translate3d(0%2C280px%2C0)%20rotate3d(1%2C0%2C0%2C-90deg)%3B%0D%0A%09transform%3A%20translate3d(0%2C280px%2C0)%20rotate3d(1%2C0%2C0%2C-90deg)%3B%0D%0A%09opacity%3A%200%3B%0D%0A%7D%0D%0A%0D%0A.ch-item%3Ahover%20.ch-info-back%20%7B%0D%0A%09-webkit-transform%3A%20rotate3d(1%2C0%2C0%2C0deg)%3B%0D%0A%09-moz-transform%3A%20rotate3d(1%2C0%2C0%2C0deg)%3B%0D%0A%09-o-transform%3A%20rotate3d(1%2C0%2C0%2C0deg)%3B%0D%0A%09-ms-transform%3A%20rotate3d(1%2C0%2C0%2C0deg)%3B%0D%0A%09transform%3A%20rotate3d(1%2C0%2C0%2C0deg)%3B%0D%0A%09opacity%3A%201%3B%0D%0A%7D%0D%0A.ch-grid%20%7B%0D%0A%09margin%3A%2020px%200%200%200%3B%0D%0A%09padding%3A%200%3B%0D%0A%09list-style%3A%20none%3B%0D%0A%09display%3A%20block%3B%0D%0A%09text-align%3A%20center%3B%0D%0A%09width%3A%20100%25%3B%0D%0A%7D%0D%0A%0D%0A.ch-grid%3Aafter%2C%0D%0A.ch-item%3Abefore%20%7B%0D%0A%09content%3A%20”%3B%0D%0A%20%20%20%20display%3A%20table%3B%0D%0A%7D%0D%0A%0D%0A.ch-grid%3Aafter%20%7B%0D%0A%09clear%3A%20both%3B%0D%0A%7D%0D%0A%0D%0A.ch-grid%20li%20%7B%0D%0A%09width%3A%20220px%3B%0D%0A%09height%3A%20220px%3B%0D%0A%09display%3A%20inline-block%3B%0D%0A%09margin%3A%2020px%3B%0D%0A%7D%0D%0A” provider=”manual” lang=”default”/]
Output :
