Código de CSS - Posicionar una imagen en la parte inferior derecha de la pantalla

Filtrado por el tag: arábigo

<<>>

Pos: 1

Val: 870

Ha mantenido su posición en CSS (en relación al último mes)

Posicionar una imagen en la parte inferior derecha de la pantalla

CSS

Publicado el 15 de Marzo del 2019 por Joel (150 códigos)

4.705 visualizaciones desde el 15 de Marzo del 2019

Este simple código, posiciona una imagen en la parte inferior derecha de la pantalla por debajo del contenido de nuestra web.
Al pasar por encima de la imagen con el ratón, se quita la transparencia.

imagen-transparete

1

Publicado el 15 de Marzo del 2019

gráfica de visualizaciones de la versión: 1

4.706 visualizaciones desde el 15 de Marzo del 2019

<!DOCTYPE html>

<html lang="es">

<head>

	<meta charset="UTF-8">

	<style>

    .imagen-pie {

        position:fixed;

        height: 128px;

        width:128px;

        background: url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;

        opacity: 0.2;

        top: calc(100% - 150px);

        left: calc(100% - 150px);

        z-index:-1;

        transition: opacity 1s;

    .imagen-pie:hover {

        opacity: 1;

    </style>

</head>

<body>

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.