Hover squares

Hover squares.markdown

Hover squares

A Pen by Rudolf van der Ven on CodePen.

License.

index.html

<div class="container">
		<div class="wrapper"><h1>Blablabla</h1></div>
  <div class="client"><span class="logo"></span><h2>Section 1</h2><h3>Lorem ipsum</h3></div>
			<div class="client"><span class="logo"></span><h2>Section 2</h2><h3>Lorem ipsum</h3></div>
			<div class="client"><span class="logo"></span><h2>Section 3</h2><h3>Lorem ipsum</h3></div>
			<div class="client"><span class="logo"></span><h2>Section 4</h2><h3>Lorem ipsum</h3></div>
			<div class="client"><span class="logo"></span><h2>Section 5</h2><h3>Lorem ipsum</h3></div>
			<div class="client"><span class="logo"></span><h2>Section 6</h2><h3>Lorem ipsum</h3></div>
			<div class="clearer"></div>

		
	</div>

style.css

body {
background: rgba(244,103,110,1);
background: -moz-linear-gradient(left, rgba(244,103,110,1) 0%, rgba(245,141,97,1) 50%, rgba(244,103,110,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(244,103,110,1)), color-stop(50%, rgba(245,141,97,1)), color-stop(100%, rgba(244,103,110,1)));
background: -webkit-linear-gradient(left, rgba(244,103,110,1) 0%, rgba(245,141,97,1) 50%, rgba(244,103,110,1) 100%);
background: -o-linear-gradient(left, rgba(244,103,110,1) 0%, rgba(245,141,97,1) 50%, rgba(244,103,110,1) 100%);
background: -ms-linear-gradient(left, rgba(244,103,110,1) 0%, rgba(245,141,97,1) 50%, rgba(244,103,110,1) 100%);
background: linear-gradient(to right, rgba(244,103,110,1) 0%, rgba(245,141,97,1) 50%, rgba(244,103,110,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4676e', endColorstr='#f4676e', GradientType=1 );
		    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	}
	
	.container {
		margin:50px auto;
		width:747px;
		
	}
	
	.client {
		width:248px;
		height:220px;
		background-color:#fff;
		text-align:center;
		float:left;
		font-family: 'Open Sans', sans-serif;
		letter-spacing:1px;
			-webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
		border-right:1px solid #f0f0f0;
		border-bottom:1px solid #f0f0f0;
		cursor:pointer;
	}
	
	.logo {
    display:block;
		width:75px;
		height:75px;
		-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:5px solid #eee;
		margin-bottom:30px;
    background-color:#eee;
    margin:35px auto;
	}
	
	.client h2, .client h3 {
		font-size:16px;
		color:#888;
		padding:0px;
		margin:0px;
	}
	
	.client h3 {
		font-weight:100;
		margin-top:0px;
	}
	
	.clearer {
		clear:both;
	}
	
	.client:hover {
		-ms-transform: scale(1.1,1.1); /* IE 9 */
    -webkit-transform: scale(1.1,1.1); /* Safari */
    transform: scale(1.1,1.1);
		-webkit-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
-moz-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
		z-index:9999;
		border-right:1px solid transparent;
		border-bottom:1px solid transparent;
		cursor:pointer;
		background-color:#fff;
	}

.client:hover .logo {
background: rgba(244,103,110,1);
background: -moz-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(244,103,110,1)), color-stop(100%, rgba(77,64,111,1)));
background: -webkit-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -o-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -ms-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: linear-gradient(to bottom, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4676e', endColorstr='#4d406f', GradientType=0 );
  border:5px solid #eee;
}
	
	.wrapper {
				-webkit-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
-moz-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
		z-index:0;
		font-family: 'Open Sans', sans-serif;
		color:#fff;
		padding:20px;
		width:707px;
		
		
		position:relative;
		top:0px;
		z-index:-1;
	}
	
	.wrapper h1 {
		font-weight:100;
		margin:0px;
		padding:0px;
	}