Как наложить на картинку текст, чтобы и картинка и текст были ссылками?
Я в таких случаях всегда делаю ссылку блочным элементом и вкладываю в нее картинку и надпись.
Да, я знаю, что это не совсем по спецификации (по стандарту в тэг [а] нельзя вкладывать блочные элементы), но это тот самый случай, когда имеет смысл наплевать на нытье о семантике и стандартизации :) Все работает и никогда с этим проблем не было. А плодить две ссылки - это и неудобно, и (по слухам) сеошниками не поощряется.
Выкладываю решение. w3c валидатор не ругается.<div class="items-wrap">

						<div class="info-item">
							<a href="#">
								<img src="img/section2/1.png" alt="Biography">
								<p>Biography</p>
								</a>
							</div>

						

						<div class="info-item">
							<a href="">
								<img src="img/section2/2.png" alt="Family">
								<p>Family</p>
								</a>
							</div>
						

						<div class="info-item">
							<a href="">
								<img src="img/section2/3.png" alt="Hobbies">
								<p>Hobbies</p>
							</a>
						</div>

					</div>
SASS:.items-wrap
	text-align: center
	.info-item
		width: 300px
		display: inline-block
		margin: 20px 12px 30px
		position: relative
		a
			font-size: em(24px)
			font-family: "Source Sans Pro Regular", $helvetica
			color: #fff
			img
				border: 1px solid #000
			p
				display: block
				border: 1px solid #fff
				width: 200px
				//margin: 120px 40px
				position: absolute
				top: 170px
				left: 55px