[Resolvido] Transição de Imagem com Css

[dcreative 0]

Olá Pessoal.

Não consigo fazer uma transição SUAVE de imagens com o css.

Eu gostaria de algo Assim como esse exemplo:

 

Veja ele funcionando aqui

 

ps: O exemplo não utiliza imagem, utiliza puro código. Eu queria fazer uma coisa parecida, mas com imagem.

Agradeço desde já.

 

Att.

Diego Henrique

[P@trique 0]

Na mão meu chegado:

 

Demo: http://tympanus.net/Tutorials/OriginalHoverEffects/

Tutorial/Download: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

 

Se quiser mais exemplos procure por hover effects css3 images vai encontrar muita coisa.

[Jimmy Page_73975 3]

Na mão meu chegado:

 

Demo: http://tympanus.net/Tutorials/OriginalHoverEffects/

Tutorial/Download: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

 

Se quiser mais exemplos procure por hover effects css3 images vai encontrar muita coisa.

 

o ruim é que ele não funciona no IE -.-'

[P@trique 0]

Sim, isso acontece por conta do uso do css3 para fazer este tipo de transição, mais para dar um jeito nisso existe o http://modernizr.com/ que resolve este problema.

 

ou ainda... http://www.100loop.com/design/seletores-do-css3-para-internet-explorer/

[Jimmy Page_73975 3]

Sim, isso acontece por conta do uso do css3 para fazer este tipo de transição, mais para dar um jeito nisso existe o http://modernizr.com/ que resolve este problema.

 

ou ainda... http://www.100loop.com/design/seletores-do-css3-para-internet-explorer/

 

Você pode me explicar para que serve isso?

[P@trique 0]

Veja aqui: http://tableless.com.br/utilizando-a-biblioteca-modernizr/

[Jimmy Page_73975 3]

Veja aqui: http://tableless.com.br/utilizando-a-biblioteca-modernizr/

 

Valeu, amanhã vou ler.

 

Boa noite :thumbsup:

[André do Vale 76]

Se não quiser recorrer a tantas bibliotecas para "correção" nos IE, e ao CSS3, pode também utilizar essas transições simples com jQuery. Você utilizaria elementos ocultos e posicionados de forma absoluta, ao passar o mouse (.hover()) faria um efeito de .toggle() nesses que estavam ocultos. :thumbsup:

 

Se precisar de um exemplo mais claro, volte a postar que pela noite consigo fazer um.

[dcreative 0]

Na mão meu chegado:

 

Demo: http://tympanus.net/Tutorials/OriginalHoverEffects/

Tutorial/Download: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

 

Se quiser mais exemplos procure por hover effects css3 images vai encontrar muita coisa.

 

Então, esses efeitos são muito legais. E MUITO obrigado pela sua resposta cara.

Só que oque o cliente me pede é algo diferente. Por exemplo.

Eu tenho uma imagem marrom, tipo uma estrela, e quando eu colocar o mouse gostaria que ela suavizasse e alternasse para uma estrela Branca.

Vou estudar esses que voce me passou, e tentar manipular. MUITO obrigado novamente,

Abraços

 

Se não quiser recorrer a tantas bibliotecas para "correção" nos IE, e ao CSS3, pode também utilizar essas transições simples com jQuery. Você utilizaria elementos ocultos e posicionados de forma absoluta, ao passar o mouse (.hover()) faria um efeito de .toggle() nesses que estavam ocultos. :thumbsup:

 

Se precisar de um exemplo mais claro, volte a postar que pela noite consigo fazer um.

 

Olá André, obrigado pela sua contribuição.

Cara se você pudesse me auxiliar, seria muito grato. Pois estou a dias tentando resolver isto.

 

Abraços

[P@trique 0]

Entendi, eu tenho um script aqui que pode te ajudar, estude ele pois acredito que se for uma transição simples, você pode utilizar um pouco de js, css e sprite.

 

Veja ai:

 

<style>
   .signos:hover {
       background-color: #909090;
   }
   .selecionado {
       background-color: #FF7F00!important;
   }
   .aries {
       background-position: 0 0;
   }
   .touro {
       background-position: -29px 0;
   }
   .gemeos {
       background-position: -59px 0;
   }
   .cancer {
       background-position: -89px 0;
   }
   .leao {
       background-position: -119px 0;
   }
   .virgem {
       background-position: -147px 0;
   }
   .libra {
       width: 21px;
       background-position: -176px 0;
       margin-left: 0;
       margin-right: 1px;
   }
   .escorpiao {
       width: 21px;
       background-position: -207px 0;
   }
   .sagitario {
       margin-top: 3px;
       background-position: -237px 0;
   }
   .capricornio {
       width: 20px;
       margin-top: 1px;
       background-position: -267px 0;
   }
   .aquario {
       width: 20px;
       background-position: -296px 0;
   }
   .peixes {
       background-position: -324px 0;
   }
   .signos {
       margin-left: 10px;
       float: left;
       width: 22px;
       height: 22px;
       background-image: url('http://s.glbimg.com/en/ho/media/libby/widgets_home/widget_base/img/sprite_widgets_home.png');
       background-repeat: no-repeat;
       background-color: #ADADAD;
       -moz-transition-property: background-color;
       -webkit-transition-property: background-color;
       -o-transition-property: background-color;
       transition-property: background-color;
       -moz-transition-duration: 140ms;
       -webkit-transition-duration: 140ms;
       -o-transition-duration: 140ms;
       transition-duration: 140ms;
       -moz-transition-timing-function: linear;
       -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
       transition-timing-function: linear;
   }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
       $('#aba1').load('signos.asp?s=aries');
       $('.desktop-menu a').click(function () {
           $('.desktop-menu a').removeClass('selecionado');
           $(this).addClass('selecionado');
           var signo = $(this).attr('href');
           $('#aba1').load('signos.asp?s=' + signo);
           return false;
       });
   });
</script>
<div id="aba1"></div>
<div class="desktop-menu">
   <a href="aries" class="signos aries selecionado" title="Áries"></a>
   <a href="touro" class="signos touro" title="Touro"></a>
   <a href="gemeos" class="signos gemeos" title="Gêmeos"></a>
   <a href="cancer" class="signos cancer" title="Câncer"></a>
   <a href="leao" class="signos leao" title="Leão"></a>
   <a href="virgem" class="signos virgem" title="Virgem"></a>
   <a href="libra" class="signos libra" title="Libra"></a>
   <a href="escorpiao" class="signos escorpiao" title="Escorpião"></a>
   <a href="sagitario" class="signos sagitario" title="Sagitário"></a>
   <a href="capricornio" class="signos capricornio" title="Capricórnio"></a>
   <a href="aquario" class="signos aquario" title="Aquário"></a>
   <a href="peixes" class="signos peixes" title="Peixes"></a>
</div>

[dcreative 0]

Cara, você conseguiu me dar uma opção mais fácil, MUITO obrigado.

Esses tópicos são de mais.

 

Sucesso a todos.

[P@trique 0]

Excelente :grin:

[dcreative 0]

Achei a solução do jeito que eu queria.

Da uma olhada nesse Demo e o dowload.

 

Muito Obrigado pelas respostas, com elas resolvi outros problemas.

 

abraços