How to create a div text cover for a photo with z-index in relative position

Question

I apologize for my poor English --- I'm trying to write a text cover for the photo in relative position . if use absolute position for cover div : Its width more than a father's div

.box {
  width: 600px;
  margin: 120px auto 0px auto;
}

.img-box-li {
  float: right;
  width: 50%;
}

.cover-title {
  width: 100%;
  height: 200px;
  background-color: rgba(455, 556, 852, 0.5);
  margin-bottom: -200px;
  z-index: 1;
}

.img {
  width: 100%;
  height: 200px;
  z-index: -1;
}

.img img {
  width: 100%;
  height: 200px;
}

<div class="box">

  <div class="img-box-li">
    <div class="cover-title">
      <p>THIS IS TITLE</p>
    </div>
    <div class="img">
      <img src="img.jpg">
    </div>
  </div>

  <div class="img-box-li">
    <div class="cover-title">
      <p>THIS IS TITLE</p>
    </div>
    <div class="img">
      <img src="img.jpg">
    </div>
  </div>

</div>

Please upload to us an image of what you want to achieve. – Elman Huseynov Apr 09 '20 at 13:32 — Elman Huseynov, Apr 09 '20 at 13:32

score 1 · Accepted Answer · edited Apr 13 '20 at 13:28

Here I added the code that might help you: -- The images are used for sample.

<div class="box">

    <div class="img-box-li">
        <div class="cover-title">
            <p class="title">THIS IS TITLE</p>
        </div>
        <div class="img">
         
            <img src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539__340.jpg">
        </div>
    </div>

    <div class="img-box-li">
        <div class="cover-title">
            <p class="title">THIS IS TITLE</p>
        </div>
        <div class="img">
            <img src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539__340.jpg">
        </div>
    </div>

</div>
<style>
.title {
    font-size: 25px;
    color: #fff;
}
.box {
    width: 600px;
    margin:120px auto 0px auto;
}
.img-box-li {
    float: right;
    width: 50%;
}
.cover-title {
    width: 100%;
    height: 200px;
    background-color: rgba(0,0,0,0.5);
    margin-bottom: -200px;
}
.img {
    width: 100%;
    height: 200px;
}
.img img {
    position: relative;
    z-index: -10;
    width: 100%;
    height: 200px;

}
</style>

score 0 · Answer 2 · answered Apr 09 '20 at 13:34

Not sure what your view looks like but you may check the code below:

<!DOCTYPE html>
<html lang="en">
<title>Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif}
.box {
    width: 600px;
    margin:120px auto 0px auto;
}
.img-box-li {
    float: right;
    width: 50%;
}
.cover-title {
    width: 100%;
    height: 50px;
    background-color: rgba(455,556,852,0.5);
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    background: greenyellow;
    bottom: -200px;
}
.cover-title p{
    position: relative;
    top:30%;
    left: 10%;
    font-weight: bold;
}
.transparent{
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=60);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.6;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.6;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.6;
}
.img {
    width: 100%;
    height: 200px;
    z-index: -1;
}
.img img {
    width: 100%;
    height: 200px;
}
</style>
<body>
    <div class="box">

    <div class="img-box-li">
        <div class="cover-title transparent">
            <p>THIS IS TITLE</p>
        </div>
        <div class="img">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQplcXd6D9A-MNsUpz9rSLuamsoZj0UltNL4FJtGBSJrFZrbL40&usqp=CAU">
        </div>
    </div>

    <div class="img-box-li">
        <div class="cover-title transparent">
            <p>THIS IS TITLE</p>
        </div>
        <div class="img">
            <img src="https://cdn.pixabay.com/photo/2015/09/16/08/55/online-942408_960_720.jpg">
        </div>
    </div>

</div>
</body>
</html>

How to create a div text cover for a photo with z-index in relative position

2 Answers2