How to create a raise image effect by hovering the mouse over

Question

I’m new here and I’m basic in CSS.

I would like to know how to create an effect that, when you pass the mouse over the image, it raises a little.

Answer 1

A simple solution with css:

CSS:

#teste{position:relative}
#teste:hover{top:-2px;box-shadow:0 2px 2px #666}

HTML:

<img src="/imagem.png" id="teste">

If you want to simplify, for older browsers, just use a border instead of shadow:

#teste{position:relative}
#teste:hover{top:-2px;border-bottom:2px solid #999}

Incrementing with Transitions:

With Transitions you can use the same technique above, but with the browser making an animation between the normal and hover:

#teste{position:relative;top:0}
#teste:hover{top:-4px;box-shadow:0 4px 4px #999;
   transition: all .2s ease-in-out}

Just adjust the parameters for the desired effect.

Demo:

#teste1{position:relative;padding:4px;background-color:#cf6}
#teste1:hover{top:-2px;box-shadow:0 2px 2px #666}

#teste2{position:relative;padding:4px;background-color:#cf6}
#teste2:hover{top:-2px;border-bottom:2px solid #999;padding-bottom:2px}

#teste3{position:relative;top:0;padding:4px;background-color:#cf6;
    transition: all .2s ease-in-out}
#teste3:hover{top:-4px;box-shadow:0 4px 3px #999}

Box-shadow (passe o mouse para testar):<br>
<img src="https://i.stack.imgur.com/wizTJ.png" id="teste1"><br>
Simples, com border:<br>
<img src="https://i.stack.imgur.com/wizTJ.png" id="teste2"><br>
Incrementado, com transition:<br>
<img src="https://i.stack.imgur.com/wizTJ.png" id="teste3">

Note that in certain versions of the hover only works on elements a.

Answer 2

If what you want is an effect on the image equal to of this example of Tableless, you need to use CSS Transition and CSS Animation.

HTML

<a href="#">
    <img class="asterisco" src="http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-01.png" alt="Logo Tableless" />
    <img class="texto" src="http://tableless.com.br/wp-content/uploads/2013/04/logo-tableless-02.png" alt="Logo Tableless" />
</a>

CSS

body { background-color: #333; }    
a { color: #333; }    
.asterisco { transition: all 0.5s ease; }    
a:hover .asterisco { transform: rotate(180deg); }    
.texto { transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550); }    
a:hover .texto { transform: scale(1.2); }

Answer 3

has in javascript

    <script>
 function bigImg(x)
{
 x.style.height="64px";
x.style.width="64px";
}

  function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

Answer 4

CCS:

img:hover{
height: 50%;
width: 50%;
      }

HTML:

<img src="/imagem.jpg"` >