Efeito de zoom com mouse sobre a imagem só com CSS

Aprenda neste tutorial como criar efeito de zoom com mouse sobre a imagem só com CSS. Também na segunda parte do vídeo você vai ver como adicionar texto na frente da foto sem que o efeito de zoom seja danificado.

Este tipo de efeito é muito utilizado em blogs e sites de notícia, por isso é interessante que você saiba como usá-lo em seus próximos layouts.

HTML

<div class="zoom">   				
	<img src="img/img-01.png" class="img-responsive">   				
	<div class="text-item">
		<h2>Título da imagem</h2>
	</div>   				
</div>

CSS

.zoom {
	overflow: hidden;
}

.zoom img {
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.zoom:hover img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.text-item {
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: 20px;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #ffffff;
	text-align: center;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}