0
171
Vistas¿Cómo puedo usar css en el título de la imagen?
En realidad quiero hacer lo mismo que la imagen. 
estoy probando este css
.av-image-caption-overlay{ bottom: -6em !important; background-color: black !important; height: 200px !important; opacity: 0.5; left: 0; filter: alpha(opacity=50) !important; } pero no funciona perfectamente, estoy compartiendo el resultado. 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
No es la más elegante ni es la única forma de hacerlo, pero esto funcionará.
body { font-family: sans-serif; } .av-image-caption-overlay { position: absolute; } .av-image-caption-overlay img { max-width: 400px; } .av-image-caption-overlay span { position: absolute; bottom: 0; background: rgba(0, 0, 0, .5); background: linear-gradient(0deg, rgba(0,0,0,.75) 25%, rgba(0,0,0,0) 100%); height: 100px; left: 0; right: 0; color: white; padding: 24px; font-size: 20px; display: flex; align-items: flex-end; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" /> </head> <body> <div class="av-image-caption-overlay"> <span>CAPTION</span><img className="text-image-list-image" src="https://i.stack.imgur.com/xm82O.jpg" alt="" /> </div> </body> </html>
·
Juan Pablo Isaza
Denunciar
0
El degradado lineal de fondo debería hacerlo.
La clave es crear un elemento dentro del div que desea diseñar, darle las siguientes propiedades y debería funcionar.
div { position: relative; background: url(/* Some image url */); /* Or you could append an 'img' tag into this div like I did in the codepen below */ } .overlay { /* Or you could use the '::before' pseudo-element of the div here */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(transparent, #000a); z-index: 999; }Esto es lo que pude hacer en Codepen sobre esto https://codepen.io/emekaorji/pen/xxLvQaW
·
Juan Pablo Isaza
Denunciar
Responde la pregunta