CodePen

HTML

            
              <div class="page-title">
<div class="one-fourth first"><a href="http://lakesidedfw.com/wp-content/uploads/2013/02/jogger-265.jpg"><img class="alignleft size-full wp-image-503" alt="jogger-265" src="http://lakesidedfw.com/wp-content/uploads/2013/02/jogger-265.jpg" />Recreation</a></div>

<div class="one-fourth"><a href="http://lakesidedfw.com/wp-content/uploads/2013/02/girls-SHOPPING-BTN-265.jpg"><img class="alignleft size-full wp-image-500" alt="girls-SHOPPING-BTN-265" src="http://lakesidedfw.com/wp-content/uploads/2013/02/girls-SHOPPING-BTN-265.jpg" />Shopping</a></div>

<div class="one-fourth"><a href="http://lakesidedfw.com/wp-content/uploads/2013/02/couple-Dining-265.jpg"><img class="alignleft size-full wp-image-498" alt="couple-Dining-265" src="http://lakesidedfw.com/wp-content/uploads/2013/02/couple-Dining-265.jpg" />Dining</a></div>

<div class="one-fourth"><a href="http://lakesidedfw.com/wp-content/uploads/2013/02/sunet-closeup-265.jpg"><img class="alignleft size-full wp-image-495" alt="sunet-closeup-265" src="http://lakesidedfw.com/wp-content/uploads/2013/02/sunet-closeup-265.jpg" />Beauty</a></div>

</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .page-title {
	border-bottom: double #ddd;
	border-top: none #ddd;
	margin: 0 auto 0px;
	font-family: 'Lora', serif;
	font-size: 24px;
	line-height: 1.0;
	overflow: auto;
	padding: 10px 0 30px;
	text-align: center;
}

.page-title p {
	font: inherit;
	line-height: 1.0;
}

.page-title a img {
	transition-property: opacity;
	-o-transition: opacity 0.25s linear;
	-moz-transition: opacity 0.25s linear;
	-webkit-transition: opacity 0.25s linear;
	opacity: 1;
	max-width: 100%;
	height: auto;
	display: block;
}

.page-title a img:hover {
	opacity: 0.7;
}

.page-title a {
	opacity: 1;
}

.page-title a:hover {
	opacity: 1;
	font-color: #333;
	text-decoration: none;
}


/* Column Classes
------------------------------------------------------------ */

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin: 0 0 20px;
	padding-left: 3%;
}

.one-half,
.three-sixths,
.two-fourths {
	width: 48%;
}

.one-third,
.two-sixths {
	width: 31%;
}

.four-sixths,
.two-thirds {
	width: 65%;
}

.one-fourth {
	width: 22.5%;
}


.three-fourths {
	width: 73.5%;
}

.one-fifth {
	width: 17.4%;
}

.two-fifths {
	width: 37.8%;
}

.three-fifths {
	width: 58.2%;
}

.four-fifths {
	width: 78.6%;
}

.one-sixth {
	width: 14%;
}

.five-sixths {
	width: 82%;
}

.first {
	clear: both;
	padding-left: 0;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................