Q:

Is there a way to give a cover to auto-scale image with CSS only?

It is well known that using max-height and max-width can make an image auto fit in a div, like the following:
.cover img {
    max-width: 100%;
    max-height: 100%;
}

Is there a way to make a translucent cover (by setting opacity: 0.8 to a div) that just fit the size of the image without getting the width and height by javascript?
The following is my attempt in jsfiddle. I can only make it cover the whole container, but what I want is just to cover the image only. The size of the image is variable as they are to be uploaded by user.
https://jsfiddle.net/muorou0c/1/

A:

Here's a simple flexbox-solution that should be quite straight forward:

.container {
  display: block;
  height: 300px;
  width: 300px;
  background-color: #000;
  border: 2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner {
  position: relative;
}
.container img {
  max-width: 300px;
  max-height: 300px;
  display: block;
}
.cover {
  display: none;
}
.container:hover .cover{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  opacity: 0.8;
}
<div class="container">
  <div class="inner">
    <img src="http://lorempixel.com/400/200/">
    <div class="cover"></div>
  </div>
</div>

<div class="container">
  <div class="inner">
    <img src="http://lorempixel.com/400/800/">
    <div class="cover"></div>
  </div>
</div>

There are three parts that makes this solution work:

Hard coded container size on img tag (as max-width: 300px, max-height: 300px), to maintain aspect ratio and size.
Using an inner container div that wraps the boundaries for the cover layer, setting the boundary as to how big the cover can be. The .cover could be replaced with a ::before or ::after pseudo element, see the alternative fiddle below.
Using flexbox to center the inner container in the outer container. This could also be done using the position absolute + translate3d trick used to position the .cover element in the original question, see the alternative fiddle below.

Here's a fiddle with the alternative solutions from point 2 & 3 above:
https://jsfiddle.net/muorou0c/18/

A:

I have adapted your fiddle, and added an extra layer under container

.container {
  position: relative;
  display: block;
  height: 300px;
  width: 300px;
  max-height: 300px;
  max-width: 300px;
  background-color: #000;
  border: 2px solid red;
}

.container2 {
  max-width: inherit;
  max-height: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 2px solid cyan;
}

.container2 img {
  max-height: inherit;
  max-width: inherit;
}

.cover {
  display: none;
}
.container:hover .cover{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  opacity: 0.8;
}
<div class="container">
  <div class="container2">
  <img src="http://lorempixel.com/400/200/">
      <div class="cover"></div>
  </div>
</div>

<div class="container">
  <div class="container2">
  <img src="http://lorempixel.com/400/800/">
  <div class="cover"></div>
  </div>
</div>

This works by setting to container a max-height ans max-width. This go to the image via inherit values.
Then the image gets its dimension.
And the container2 element gets it's dimension from the child.
and finally cover uses the dimension from container2

