Se mueve todo dentro del footer.

[ilu7ionHD]

Código HTML:

<footer id="footer">            
            <a href="https://blablabla" target="_blank"><img src="icono/facebook.png" id="ico_facebook"/></a>
            <a href="https://blablabla" target="_blank"><img src="icono/tw.png" id="ico_Twitter"/></a>
            <a href="https://blablabla" target="_blank"><img src="icons/in.png" id="ico_instagram"/></a>
            
            <div id="pie">
                <p id="copyright">©Blablabla 2016 - <a href="pv.html" class="legal">POLÍTICAS DE PRIVACIDAD</a> - <a href="tr.html" class="legal">TÉRMINOS Y CONDICIONES</a></p>
            </div>
        </footer>
 

Quiero que esos iconos al pasar el mouse por encima se agranden un poco, pero si alterar a los iconos de al lado ni tampoco al texto de abajo. Como hago?

Pretendo que se agranden poco, ejemplo, 0.5px - 2px

[mardojai]

Lo puedes hacer con transform usando scale. (https://developer.mozilla.org/en-US/.../CSS/transform).

Código HTML:

<a href="#" class="icon"><img src="imagen"/></a>
<a href="#" class="icon"><img src="imagen"/></a>
<a href="#" class="icon"><img src="imagen"/></a>
 

Código CSS:

.icon img { 
  transition: transform .2s ease; /* Aplicamos transición de 0.2 segundos al transform, con la aniamción "ease" */
}
.icon img:hover { 
  transform: scale(1.5,1.5); /* Incrementamos el tamaño de la imagen por una vez y media de su tamaño original */
  -ms-transform: scale(1.5,1.5); /* IE 9 */
  -webkit-transform: scale(1.5,1.5); /* Safari */
}
 

Un ejemplo vale más que mil palabras: https://jsfiddle.net/tx1gb96e/.

Saludos!

[ilu7ionHD]

No me funciona con clase, solo con id. O sea tu código pero con # y sin "img" funciona bien. Por que?

[ilu7ionHD]

Ah ya encontré el problema, bien funciona bastante bien.
Pero al pasar el mouse por arriba se crea como un borde blanco alreadedor de mi icono, de aproximadamente 1px, por que?

[mardojai]

Mmm, si me enseñas tu código completo podría ver.

¿Quizá algún problema con el renderizado del navegador?
¿Has probado usar SVG en lugar de PNG para tus iconos?

Saludos!

[ilu7ionHD]

Note que la diferencia entre tu código y el mio era el formato de los iconos.
Efectivamente yo uso, PNG.
Porque acepta canal alpha a diferencia de otros formatos como el JPG.

Disculpa mi ignorancia, pero con que programa se hacen los SVG?.
Es el formato que se usa profesionalmente para hacer páginas?

[mardojai]

SVG (Scalable Vector Graphics) es un estándar para gráficos vectoriales https://es.wikipedia.org/wiki/Scalable_Vector_Graphics.
Al ser vectores tienen la ventaja que pueden ser re-dimensionados tanto como se quiera, y no perderán calidad ya que son curvas.

Yo normalmente uso estas webs para proveerme de iconos SVG con diseño flat:

• http://www.flaticon.com/
• http://iconmonstr.com/

Los SVG normalmente los trabajo con Inkscape, pero si no me equivoco puedes exportar a este formato en programas como Ilustrator o Corel Draw.

Saludos!

[ilu7ionHD]

cambia de formato a SVG y sigue apareciendo lo mismo.

.class img
{
margin-top: 10px;
background-color: #797979;
width:35px;
height:35px;
transition: transform .1s ease-in-out;
}
.class img:hover
{
background-color: #fff;
border-bottom: none;
border-color: #333333;
transform: scale(1.1,1.1);
}

Esos border son para tratar de eliminar el borde blanco que se genera al pasar el mouse por encima pero nada funciona