How can i use css in image caption?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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