Imágenes Flotante Con CSS

Con este tutorial aprenderemos a hacer imágenes flotantes con CSS de modo que las imágenes para nuestra web serán más originales y atractivas. De esta forma tus imágenes llamarán más la atención y le será más llamativa a tus visitantes.

Esto es mas fácil de lo que yo pensaba, es realmente sencillo… solo consiste en agregarle unos cuantos styles a la etiqueta “img” en nuestro html:

<img style="display:scroll;position:fixed; top:0px; right:0px;" src="la-ruta-de-imagen.jpg" />

Lo anterior haría que nuestra imagen se coloque en la parte superior derecha de la ventana del navegador… si quisieramos

Si quisiéramos colocar la imagen abajo, nuestro html sería así:

<img style="display:scroll;position:fixed; bottom:0px; right:0px;" src="la-ruta-de-imagen.jpg" />

Lo importante es jugar con right, bottom, left y top

Esto bien podríamo, ponerlo en nuestros archivos css como class, y llamarlo en nuestras imágenes insertadas en html.