Código de CSS - Imagen que sobresale del div

Imágen de perfil
Val: 200
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Imagen que sobresale del divgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 5 de Agosto del 2019 por Joan
810 visualizaciones desde el 5 de Agosto del 2019
Este código muestra como mostrar una imagen que sobresalga del div por la parte superior, pudiendo especificar diferentes tamaños y colores.

imagen-sobresale-div

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 5 de Agosto del 2019gráfica de visualizaciones de la versión: Versión 1
811 visualizaciones desde el 5 de Agosto del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
 
        <style>
        .block {
            width:300px;
            text-align:center;
            margin-top:50px;
        }
        .block .image {
            position:relative;
            border-radius:50%;
            margin:auto;
        }
        .block .content {
            padding:20px 0;
            font-size:24px;
        }
 
 
        /* colores de fondo */
        .block.blue, .block.blue .image {
            background-color:#7ac7c7;
        }
        .block.red, .block.red .image {
            background-color:#c77a7a;
        }
        .block.green, .block.green .image {
            background-color:#9fc77a;
        }
 
 
        /* tamaños */
        .block.size16 .image {
            top:-16px;
            width:32px;
            height:32px;
        }
        .block.size16 .image img {
            padding: 8px;
        }
        .block.size24 .image {
            top:-24px;
            width:48px;
            height:48px;
        }
        .block.size24 .image img {
            padding: 16px;
        }
        .block.size32 .image {
            top:-32px;
            width:64px;
            height:64px;
        }
        .block.size32 .image img {
            padding: 24px;
        }
        </style>
 
    </head>
<body>
 
<div class='block blue size16'>
    <div class='image'><img src='ico_twitter.png'></div>
    <div class='content'>
        Texto
    </div>
</div>
 
<div class='block green size24'>
    <div class='image'><img src='ico_twitter.png'></div>
    <div class='content'>
        Texto
    </div>
</div>
 
<div class='block red size32'>
    <div class='image'><img src='ico_twitter.png'></div>
    <div class='content'>
        Texto
    </div>
</div>
 
</body>
 
</html>



Comentarios sobre la versión: Versión 1 (1)

Imágen de perfil
19 de Agosto del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5462