iHover: Pacote com efeitos de puro CSS3

iHover: Pacote com efeitos de puro CSS3

Nenhum produto encontrado nessa seleção.

iHover é um pacote com mais de 30 efeitos de puro CSS3 para todas as imagens de seus documentos HTML, e o melhor de tudo é que você não vai precisar saber praticamente nada de CSS3, simplesmente crie um link do arquivo CSS do iHover no <head> do seu documento e utilize as classes desejadas para cada um dos efeitos.

Por exemplo, dependendo do caminho que você colocou o arquivo CSS do iHover, você só precisa dessa linha no cabeçalho do seu documento:

<link href="caminho/do/arquivo/ihover.css" rel="stylesheet">

Depois que você "linkou" este arquivo CSS, basta utilizar as classes como são detalhadas no site demo do próprio iHover.

Por exemplo:

<!-- normal -->
<div class="ih-item circle effect2 left_to_right">
<a href="#">
	<div class="img">
		<img src="endereco_da_imagem.jpg" alt="img">
	</div>
	<div class="info">
		<h3>Cabeçalho da Imagem</h3>
		<p>Uma descrição qualquer sobre o que você quiser falar!</p>
	</div>
</a>
</div>
<!-- end normal -->

Ou se preferir visualizar o HTML completo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title>iHover Demo</title>
		
		<link rel="stylesheet" type="text/css" href="ihover.min.css">
	</head>

	<body>
		<!-- normal -->
		<div class="ih-item circle effect2 left_to_right">
		<a href="#">
			<div class="img">
				<img src="http://fc07.deviantart.net/fs70/i/2012/161/3/9/beauty_smile_by_zzzaaalll-d52yc99.jpg" alt="img">
			</div>
			<div class="info">
				<h3>Cabeçalho da Imagem</h3>
				<p>Uma descrição qualquer sobre o que você quiser falar!</p>
			</div>
		</a>
		</div>
		<!-- end normal -->	
	</body>
</html>

iHover: Demo

Veja abaixo apenas um dos efeitos que o iHover pode proporcionar para suas páginas:

Concluindo

O iHover facilita muito a nossa vida quando queremos acelerar o processo da criação de efeitos legais em imagens com CSS3, no entanto, só funciona com os navegadores "tops de linha" (Internet Explorer 9+, Google Chrome, Firefox, etc…) que suportam CSS3, por isso, você deve analisar seu projeto para saber se é viável sua utilização.

Mesmo assim, é legal dar uma lida no código CSS, alterar (se quiser) e compartilhar com seu criador no GitHub, conhecimento gera conhecimento.

/4 Comentários/por