[DICA] - Efeitos hover
muito legal essa dica
[url]http://tympanus.net/Tutorials/CaptionHoverEffects/index.html[/url]
[url]http://tympanus.net/Tutorials/CaptionHoverEffects/index.html[/url]
Marcelo Pastore
Curtidas 0
Respostas
José
26/06/2013
Realmente muito legal Marcelo.
GOSTEI 0
Joel Rodrigues
26/06/2013
Bem interessante. Obrigado por compartilhar.
GOSTEI 0
Walter Junior
26/06/2013
Mas nesse site que você passou, eles só mostram o efeito pronto, mas não tem mostrando o código de como faze-los né ?
ou tem e eu não achei ?
ou tem e eu não achei ?
GOSTEI 0
Marcelo Pastore
26/06/2013
Mas nesse site que você passou, eles só mostram o efeito pronto, mas não tem mostrando o código de como faze-los né ?
ou tem e eu não achei ?
ou tem e eu não achei ?
tb estou com essa duvida, hehehe
GOSTEI 0
José
26/06/2013
É eu também andei olhando, e só vi demonstrações de efeito
mas não conseguir encontrar o código de criação desses efeitos e nem explicações de como cria-los.
mas não conseguir encontrar o código de criação desses efeitos e nem explicações de como cria-los.
GOSTEI 0
Marcelo Pastore
26/06/2013
poxa, que dica FAIL essa minha...peço desculpas...mas tb não achei nada.
GOSTEI 0
José
26/06/2013
poxa, que dica FAIL essa minha...peço desculpas...mas tb não achei nada.
Que isso amigo, não precisa pedir desculpas, sua dica foi bem legal, os efeitos são interessantes.
Estranho é o próprio site não ter posto o código fonte dos efeitos.
a não ser que não estamos procurando no local certo, mas acho difícil isso.
GOSTEI 0
Walter Junior
26/06/2013
Olha só pessoal, acho que para ter melhor acesso a esses efeitos e até mesmo aos códigos.
tem que ser cadastrado.
tem que ser cadastrado.
GOSTEI 0
Marcelo Pastore
26/06/2013
poxa, que dica FAIL essa minha...peço desculpas...mas tb não achei nada.
Que isso amigo, não precisa pedir desculpas, sua dica foi bem legal, os efeitos são interessantes.
Estranho é o próprio site não ter posto o código fonte dos efeitos.
a não ser que não estamos procurando no local certo, mas acho difícil isso.
vlw, mas foi falta de atenção minha.
GOSTEI 0
Marcelo Pastore
26/06/2013
Olha só pessoal, acho que para ter melhor acesso a esses efeitos e até mesmo aos códigos.
tem que ser cadastrado.
tem que ser cadastrado.
vc fez o cadastro?
GOSTEI 0
Walter Junior
26/06/2013
ainda não, fiz o cadastro não amigo.
mas fiquei pensando que essa poderia ser a solução.
mas fiquei pensando que essa poderia ser a solução.
GOSTEI 0
Marcelo Pastore
26/06/2013
eu vi tb...bom, não vou fazer, quem sabe quando eu precisar realmente desses efeitos, vlw aew!!!
GOSTEI 0
Joel Rodrigues
26/06/2013
Pessoal, tem os fontes pra download nesse link: [url]http://tympanus.net/codrops/2013/06/18/caption-hover-effects/[/url]. Aquele primeiro link é o demo;
GOSTEI 0
José
26/06/2013
Pessoal, tem os fontes pra download nesse link: [url]http://tympanus.net/codrops/2013/06/18/caption-hover-effects/[/url]. Aquele primeiro link é o demo;
Boa Joel, alguém desvendou o mistério de como conseguir os códigos dos efeitos rsrs
GOSTEI 0
José
26/06/2013
Amigos, podemos dar este tópico por concluído ?
GOSTEI 0
Andre Fonseca
26/06/2013
pessoal consegui extrair o o codigo da pagina:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caption Hover Effects - Demo 1</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container demo-1">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/CreativeButtons/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15469"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<h1>Caption Hover Effects</h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Effect 1</a>
<a href="index2.html">Effect 2</a>
<a href="index3.html">Effect 3</a>
<a href="index4.html">Effect 4</a>
<a href="index5.html">Effect 5</a>
<a href="index6.html">Effect 6</a>
<a href="index7.html">Effect 7</a>
</nav>
</header>
<ul class="grid cs-style-1">
<li>
<figure>
<img src="images/1.png" alt="img01">
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/2.png" alt="img02">
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115960-Music">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/3.png" alt="img03">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/4.png" alt="img04">
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116775-Safari">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/5.png" alt="img05">
<figcaption>
<h3>Phone</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1117308-Phone">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/6.png" alt="img06">
<figcaption>
<h3>Game Center</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1118904-Game-Center">Take a look</a>
</figcaption>
</figure>
</li>
</ul>
</div><!-- /container -->
<script src="js/toucheffects.js"></script>
<!-- For the demo ad only -->
<script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caption Hover Effects - Demo 1</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container demo-1">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/CreativeButtons/"><span>Previous Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15469"><span>Back to the Codrops Article</span></a></span>
</div>
<header>
<h1>Caption Hover Effects</h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Effect 1</a>
<a href="index2.html">Effect 2</a>
<a href="index3.html">Effect 3</a>
<a href="index4.html">Effect 4</a>
<a href="index5.html">Effect 5</a>
<a href="index6.html">Effect 6</a>
<a href="index7.html">Effect 7</a>
</nav>
</header>
<ul class="grid cs-style-1">
<li>
<figure>
<img src="images/1.png" alt="img01">
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/2.png" alt="img02">
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115960-Music">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/3.png" alt="img03">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/4.png" alt="img04">
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116775-Safari">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/5.png" alt="img05">
<figcaption>
<h3>Phone</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1117308-Phone">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/6.png" alt="img06">
<figcaption>
<h3>Game Center</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1118904-Game-Center">Take a look</a>
</figcaption>
</figure>
</li>
</ul>
</div><!-- /container -->
<script src="js/toucheffects.js"></script>
<!-- For the demo ad only -->
<script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
</body>
</html>
GOSTEI 0
Marcelo Pastore
26/06/2013
testou localmente???
GOSTEI 0
Andre Fonseca
26/06/2013
não os codigos que posto não foram testados localmente
GOSTEI 0