Does not display background-color on top of the image, how to fix it?

Question

JavaScript

it turns out that there

should be a black transparent background for the headings here is part of the html
code

<div class="item">
  <div class="item-inner">
    <img src="https://pp.vk.me/c622026/v622026294/e4ef/Nxw6qvyQ60E.jpg" class="center">
    <p class="spec">accessory</p>
  </div>
</div>

css

.item {
  width:33%;
  height:300px;
  padding-left:15px;
  padding-right:15px;
  display:inline-block;
}
.item-inner {
  border:5px solid #4f1404;
  height:100%;
  overflow: hidden;
}
.item-inner img {
  height:100%;
}
.center {
  margin: 0px -100px;
}
.spec {
  color:white;
  margin-top:-50px;
  font-size:20px;
  background-color:rgba(0, 0, 0, 0.8);
}

Answer 1

If I understand correctly, then you can do this - https://codepen.io/KorniloFF/pen/BbyNLe?editors=1010

Answer 2

So put your URLs inside the tags IMG, but don't show the tags themselves. The browser will load the data, and when needed you will simply show the tags IMGthat have already been loaded

Answer 3

Add to .spec
Did you want this?

Answer 4

Everything is working! codepen.io/evg_/pen/JdQqjV

Answer 5

you can play around here
codepen.io/anon/pen/QbXRbq