تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

como animar uma imagem

+ إضافة رد

5 مشاركة صفحة 1 من 1


como animar uma imagem

بواسطة wendellph » الخميس يوليو 11, 2013 11:41 pm

Olá, eu estou querendo aprender como faço a animação numa imagem igual como têm nesse site http://www.mundodse.com/ na parte direita em parceiros ao passar o mouse sobre a imagem ela sobe alguns pixels. Gostaria de aprender a fazer isso e se possível outros efeitos também.

A minha imagem no código está igual ao dele só falta a animação:

CODE: تحديد الكل
<a href="http://ocasteloanimado.blogspot.com/" target="_blank">
<img border="0" width="60" height="60" style="border-radius: 10px;"
src="http://imageshack.us/a/img823/4283/mplg.png"  /></a>
صورة العضو الشخصية

wendellph

  • مشاركات: 3
  • اشترك في: الأربعاء مايو 29, 2013 1:17 pm

Re: como animar uma imagem

بواسطة XainPro » الجمعة يوليو 12, 2013 12:30 pm

HTML
CODE: تحديد الكل
<div class="grow pic">
  <img src="image.jpg" alt="portrait">
</div>

CSS
CODE: تحديد الكل
/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}
صورة العضو الشخصية

XainPro

  • مشاركات: 3933
  • اشترك في: الجمعة فبراير 17, 2012 8:10 pm

Re: como animar uma imagem

بواسطة wendellph » الجمعة يوليو 12, 2013 1:18 pm

Obrigado por responder XainPro.

Não é bem o efeito que eu quis dizer mas já serviu para eu ter uma noção de como isso é feito ae procurei as propriedades no blog dele e achei a solução

.grow img:hover {
position:relative; top:-2px;
}

Obrigado mesmo me ajudou muito!

Se você ou alguem mais souber outros efeitos que eu possa fazer na imagem tipo já vi algumas imagens q começam tremer achei bem legal, posta aqui valeu?

Abraço a todos
صورة العضو الشخصية

wendellph

  • مشاركات: 3
  • اشترك في: الأربعاء مايو 29, 2013 1:17 pm

Re: como animar uma imagem

بواسطة XainPro » السبت يوليو 13, 2013 9:56 am

você é bem-vindo
صورة العضو الشخصية

XainPro

  • مشاركات: 3933
  • اشترك في: الجمعة فبراير 17, 2012 8:10 pm

Re: como animar uma imagem

بواسطة bracontece » الجمعة مايو 19, 2017 5:20 am

Tabém quero saber quero colocar no Super Tela
صورة العضو الشخصية

bracontece

  • مشاركات: 1
  • اشترك في: الجمعة مايو 19, 2017 5:17 am


+ إضافة رد

صفحة 1 من 1