How to place cover div onto object fit images in responsive flex container?

Question

Here is my demo to show what I mean:

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
}

body {
  background: #333;
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  height: 100%;
  padding: 20px;
}

.panel {
  flex: 0 0 200px;
  display: flex;
  margin-left: 20px;
}

.widget {
  background: white;
  width: 100%;
  height: 100%;
}

.videoContainer {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
 }

.video {
  height: 50%;
  width: 50%;
  padding: 2px;
  position: relative;
}

.videoCover {
  position: absolute;
  background: red;
  opacity: 0.4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Default for videos */
}

<div class="content">
  <div class="videoContainer">
    <div class="video">
      <div class="videoCover"></div>
      <img width="600" height="400" src="http://thatgrapejuice.net/wp-content/uploads/2016/03/rihanna-thatgrapejuice-mariah-carey-billboard-600x400.jpg">
    </div>

    <div class="video">
      <img width="600" height="400" src="http://www.radioandmusic.com/sites/www.radioandmusic.com/files/images/entertainment/2015/09/28/rihanna-%2812%29.jpg">
    </div>

    <div class="video">
      <img width="600" height="400" src="http://m.buro247.com.au/thumb/600x960_0/images/640-rihanna-charity1.jpg">
    </div>

     <div class="video">
      <img width="600" height="400" src="http://hjb.hu/wp-content/uploads/2014/02/rihanna2.jpg">
    </div> 
  </div>
  
  <div class="panel">
    <div class="widget"></div>
  </div>
  
</div>

Resizing the browser vertically or horizontally, the problem can be seen clearly. So basically I would like to place the red cover exactly onto the images. So I assume I need a div, which is exactly the same size as the image. It seems object fit does its job well, but because of this, I cannot place over the red div.

Is it can be done pure css? How should I modify the dom and the css? Thank you very much!

Clarifying what I would like to achive is:

Please follow the rules that pop up in red and post your code into the question itself. Read [mcve] for more info. — TylerH, Jun 09 '17 at 18:40
You can include Javascript code in your post using JS snippets (it's one of the icons in the edit menu) — user2314737, Jun 09 '17 at 18:48
Please [edit] your question to be on-topic: include a [mcve] that duplicates the problem. Questions seeking debugging help ("why isn't this code working?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. This question is about JavaScript/HTML/CSS, so you should consider using a [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). — Makyen, Jun 09 '17 at 18:50
Thank you, jsfiddle link in a code section - this is what the rule wanted but did not work :( — ans777, Jun 09 '17 at 18:51
ans777, people are asking you to post your code in the question, not add a link to it. — Brian, Jun 09 '17 at 18:52
Since you use `object-fit: contain;`, for that to work, with CSS only, you need to provide the image aspect ratio for each image. Is that possible? — Asons, Jun 09 '17 at 19:30
Second question, is the images always wider than they are tall?...If yes, then you don't need `object-fit`. — Asons, Jun 09 '17 at 20:37
In the end there will be videos in video tags and they will have 4:3 and 16:9 aspect ratios. I believe object-fit contain needs because of vertically resizing(?) — ans777, Jun 09 '17 at 22:07
I posted an answer, though this is far from trivial using CSS only, and if the aspect ratio isn't given, it is actually not possible with your markup without script. So to be able to improve my answer, 1: is it possible to add the aspect ratio into the markup? ... 2: can you tell what that cover is for? — Asons, Jun 11 '17 at 11:20
Cover is going to be a helper div for on screen ptz for the video, and onto the video I have to take some control btns on the right, and the camera name on the left. (In this I used images, but they will be videos.) Aspect ratio as far I as know, 4:3 and 16:9. — ans777, Jun 12 '17 at 05:36
And what about the aspect ratio? ... Each video element in the markup have to have that info set as an inline style, so is that available server side and can be assigned to the element? — Asons, Jun 12 '17 at 06:03
Also, if you check this answer I participated in, you'll see what it takes to achieve what you want: https://stackoverflow.com/a/36097410/2827823 ... added this to my answer as well — Asons, Jun 12 '17 at 06:12
Yes acpect ratio is available from the server. Thank you very much I'll check the link!! — ans777, Jun 12 '17 at 06:26

Asons · Answer 1 · 2017-06-12T06:15:12.087

The best I can come up with is this, where I wrapped all in a cover and then used a pseudo for the red cover.

I also added a few media queries, as one need to control the width of the video's, so they don't become wider than their ratio height, and if, one make them less wide.

You might need to elaborate with these settings, maybe one or two more queries will be needed, but I think one can do this pretty good, and be able to avoid the need of script.

And by cutting out object-fit, you also get a better cross browser solution.

As a side note, here is an answer I participated in, which shows what it takes to achieve what you want: Scale element proportional to Background Cover/Contain. It has a script and a CSS version

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
}

body {
  background: #333;
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  height: 100%;
  padding: 20px;
}

.panel {
  flex: 0 0 200px;
  display: flex;
  margin-left: 20px;
}

.widget {
  background: white;
  width: 100%;
  height: 100%;
}

.videoContainer {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
 }

.video {
  height: 50%;
  width: 50%;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.videoCover {
  position: relative;
  overflow: hidden;
}
.video:nth-child(1) .videoCover::after {
  content: '';
  position: absolute;
  background: red;
  opacity: 0.4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-aspect-ratio: 600/400) {
  .video:nth-child(1) .videoCover::after {
    width: 80%;
  }
  img {
    width: 80%;
  }
}
@media (min-aspect-ratio: 800/400) {
  .video:nth-child(1) .videoCover::after {
    width: 60%;
  }
  img {
    width: 60%;
  }
}
@media (min-aspect-ratio: 1000/400) {
  .video:nth-child(1) .videoCover::after {
    width: 40%;
  }
  img {
    width: 40%;
  }
}

<div class="content">
  <div class="videoContainer">
    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://thatgrapejuice.net/wp-content/uploads/2016/03/rihanna-thatgrapejuice-mariah-carey-billboard-600x400.jpg">
      </div>
    </div>

    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://www.radioandmusic.com/sites/www.radioandmusic.com/files/images/entertainment/2015/09/28/rihanna-%2812%29.jpg">
      </div>
    </div>

    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://m.buro247.com.au/thumb/600x960_0/images/640-rihanna-charity1.jpg">
      </div>
    </div>

    <div class="video">
      <div class="videoCover">
        <img width="600" height="400" src="http://hjb.hu/wp-content/uploads/2014/02/rihanna2.jpg">
      </div>
    </div> 
  </div>
  
  <div class="panel">
    <div class="widget"></div>
  </div>
  
</div>

Sorry for the late answer. Thank you very much for your effort! Yes, I believe this is the best with css only solution. I also think we should skip the object-fit property, as you said. :/ Probably this one cannot be done without calculating the size of the videos as I imagined. Thanks again! — ans777, Jun 12 '17 at 05:32
@ans777 If you optimize the media query, you can get pretty close using CSS only, it just takes some time :) — Asons, Jun 12 '17 at 06:11

How to place cover div onto object fit images in responsive flex container?

1 Answers1