Cover child img with parent div

Question

I want to cover the child img with the color of the parent div.
Actual the child img covers the divs color.
I gave the child a lower z-index then the parent, but that changes nothing.
I can't add new html-tags and want to use css.
Have somebody a solution?

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
  z-index: 2;
}

.child {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 1

Try adding :after pseudo element as shown in below code.

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
  z-index: 2;
}
.parent:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index:2;
}

.child {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 2

I personally use bootstrap and add the container function. In the container function you could add your functions. (you dont need to add your elements into a container however I would.) next add this to the stuff you want to have on top of parent div:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

the top 50% and left 50% makes it so your image is centered however this depends on how big your image etc is. Just play around with it and it will work.

Answer 3

I guess what you are searching is kind of an overlay as below. So you need to work on parent's before or after.

.parent:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.5);
}

DEMO

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
  /*z-index: 2;*/
}

.child {
  /*position: absolute;*/
  max-width: 100%;
  max-height: 100%;
  /*z-index: 1;*/
}
.parent:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.5);
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 4

You can not use z-index to move a child element behind a parent. You can however create an extra child inside the parent with the ::before pseudo element. Set this to position: absolute so it will cover the image. In the below example I've set the width to 50% so you can see what is happening.

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
}

.child {
  max-width: 100%;
  max-height: 100%;
}

.parent::before {
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  background: red;
  position: absolute;
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>