0
164
VistasHow can i use css in image caption?
Actually i want to do same as image 
i am trying this 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;
}but not work perfectly i am sharing result.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
It's not the most elegant nor is it the only way to do it, but this will work.
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
Background linear-gradient should do it.
The key thing is create an element inside the div you want to style, give it the following properties, and it should work.
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;
}
Here is what I was able to do on Codepen about this https://codepen.io/emekaorji/pen/xxLvQaW
·
Juan Pablo Isaza
Denunciar
Responde la pregunta