Grid Futured Layout(general purpose)

by Çağrı Çolak

HTML

<div id="manset">
    <div class="ana-haber">
			<a href="#" rel="bookmark">
			<div class="ana-haber-resim">
				<img width="580" height="350" src="http://i.imgur.com/7aptKj3.jpg" class="resimana" alt="">
			</div><!--ana-haber-resim-->
			<div class="buyuk-yazi">
				<h1>EA, Battlefield 4’ten Memnun</h1>
			</div><!--buyuk-yazi-->
			</a>
	</div><!--ana-haber-->
			
			<div class="kucuk-haber">
			<a href="#">
				<img width="200" height="175" src="http://i.imgur.com/pmdBBsd.jpg" class="resimkare" alt="">
				<div class="kucuk-haber-yazi">
				<h2>Motorola’dan Akıllı Saat Moto 360!</h2>
			</div><!--kucuk-haber-yazi-->
			</a>
			</div><!--kucuk-haber-->
			
			<div class="kucuk-haber">
			<a href="#">
				<img width="200" height="175" src="http://i.imgur.com/pmdBBsd.jpg" class="resimkare" alt="">
				<div class="kucuk-haber-yazi">
				<h2>Motorola’dan Akıllı Saat Moto 360!</h2>
			</div><!--kucuk-haber-yazi-->
			</a>
			</div><!--kucuk-haber-->
			
			<div class="kucuk-haber">
			<a href="#">
				<img width="200" height="175" src="http://i.imgur.com/pmdBBsd.jpg" class="resimkare" alt="">
				<div class="kucuk-haber-yazi">
				<h2>Motorola’dan Akıllı Saat Moto 360!</h2>
			</div><!--kucuk-haber-yazi-->
			</a>
			</div><!--kucuk-haber-->
			
			<div class="kucuk-haber">
			<a href="#">
				<img width="200" height="175" src="http://i.imgur.com/pmdBBsd.jpg" class="resimkare" alt="">
				<div class="kucuk-haber-yazi">
				<h2>Motorola’dan Akıllı Saat Moto 360!</h2>
			</div><!--kucuk-haber-yazi-->
			</a>
			</div><!--kucuk-haber-->
</div>

CSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
}

body {margin:0;font-size:11px; font-family: Helvetica; line-height:1;}

#manset {
overflow: hidden;
position: relative;
margin: 0 auto 20px;
width: 960px;
height: 350px;
z-index: 11;
background-color: #e74c3c;
}

.ana-haber {
float: left;
overflow: hidden;
position: relative;
width: 558px;
height: 350px;
border-left: 0px solid #fff;
box-shadow: 0 1px 0 #fff;
}

.ana-haber:hover img {
opacity: .4;
}

.ana-haber-resim {
display: block;
position: relative;
width: 100%;
height: 100%;
}

.ana-haber-resim:before {
content: '';
opacity: .5;
float: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
-moz-box-shadow: 0 0 150px 0px #e74c3c inset;
-ms-box-shadow: 0 0 150px 0px #e74c3c inset;
-o-box-shadow: 0 0 150px 0px #e74c3c inset;
-webkit-box-shadow: 0 0 150px 0px #e74c3c inset;
box-shadow: 0 0 150px 0px #e74c3c inset;
}

.ana-haber img {
float: left;
opacity: 1;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
-webkit-transition: opacity .4s;
transition: opacity .4s;
margin-left: -10px;
min-width: 580px;
height: auto;
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.buyuk-yazi {
color: #fff;
float: left;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
width: 558px;
background:...