CSS

#callToActions {
	float: left;
	padding: 0 10px 0 0;
	width: 146px;
}
	#callToActions h2 {
		background: #FD57A9;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		font-size: 1em;
		font-weight: normal;
		margin: 0 0 5px 0;
		min-height: 130px;
		padding: 0;
		text-transform: none;

	}
		#callToActions a {
			color: #fff;
			display: block;
			padding: 10px;
		}
			#callToActions h2 a:hover {
				background: rgba(0, 0, 0, 0.2);
				transition: all .3s linear;
				-webkit-transition: all .3s linear;
				-moz-transition: all .3s linear;
			}
			#callToActions h2 img {
				height:65px;
				margin: -10px 0 0 -10px;
				width: 146px;
			}
			#callToActions h2 strong {
				display: block;
				font-size: 1.4em;
				margin: 8px 0 4px 0;
				text-transform: uppercase;
			}
			#callToActions h2 span {
				text-transform:  none;
			}
		#callToActions #callYour {
			background:#B8D439;
		}
		#callToActions #callTalking {
			background:#6CBCD0;
		}

CSS (ie6)
#callToActions h2 {
	padding-top: 58px; /* this needs to be the same height as the image */
	position: relative;
}
#callToActions h2 img {
	margin: 0 !important;
	top: 0;
	left: -0px;
	position: absolute;
}


HTML

	<div id="callToActions"> 
		<h2 id="callWhere"> 
			<a href=""> 
				<img src="/images/b-where-do-we-work.jpg" width="156" height="65" alt="" /> 
				<strong>Where do we work</strong> 
				blah blah blah. <span class="readMore">more&hellip;</span> 
			</a> 
		</h2> 
		<h2 id="callYour"> 
			<a href=""> 
				<img src="/images/b-your-project.jpg" width="156" height="65" alt="" /> 
				<strong>Your Project</strong> 
				It started with ink, but it hasn't stopped there. <span class="readMore">more&hellip;</span>
			</a> 
		</h2> 
	</div>

All encompassing single link h2 call to actions (w/ sexy hover transition)

css, CSS3

CSS