* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ch-grid { display: block; height: auto; list-style: outside none none; margin: 20px 0 70px; padding: 0; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { position:relative; width: 220px; height: 220px; display: inline-block; margin: 40px 20px; } .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; background: #CCCCCC none; box-shadow: inset 0 0 0 16px #ECEDED, 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-1 { background-image: url(prg.png); } .ch-img-2 { background-image: url(imis.png); } .ch-img-3 { background-image: url(albo_telematico.png); } .ch-img-4 { background-image: url(solare.png); } .ch-info { position: absolute; background: rgba(154,26,51, 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-grid li h3 { color: #666666; text-transform: uppercase; margin: 0 auto; position:absolute; left:0; right:0; padding: 22px 0 0 0; font:normal 20px/24px 'Oswald'; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); line-height:25px; font-weight:normal; } .ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); } .ch-item:hover .ch-info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }