CSS에서 이미지 위에 오버레이를 만드는 방법은 무엇입니까?

CSS에서 이미지 위에 오버레이를 만드는 방법은 무엇입니까?

---

나는 다음과 같은 것을 성취하려고 노력하고 있습니다.

이미지 위로 마우스를 가져 가면 해당 이미지에 텍스트와 아이콘이있는이 어두운 색상을 적용하고 싶습니다.

나는 여기에 갇혀있다. 몇 가지 자습서를 찾았지만이 경우에는 작동하지 않았습니다. 또한 또 다른 문제는 모든 이미지의 높이가 다릅니다. 너비는 항상 동일합니다.

이 효과를 어떻게 얻을 수 있습니까?

---

이 간단한 CSS / HTML로이를 달성 할 수 있습니다.

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

데모 : http://jsfiddle.net/6Mt3Q/

---

UPD : 여기에 몇 가지 추가 스타일이있는 멋진 최종 데모가 있습니다.

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>

---

이를 위해 의사 요소를 사용할 수 있으며 마우스 오버에 이미지를 가질 수 있습니다.

.image {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
}
.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url(http://lorempixel.com/300/200);
  background-size: 100% 100%;
}
.image:hover:before {
  opacity: 0.8;
}

<div class="image"></div>

---

이것에 대해서는 조금 늦었지만 오버레이 방법을 검색 할 때이 스레드가 Google에 상위 결과로 나타납니다.

간단히 사용할 수 있습니다. background-blend-mode

.foo {
    background-image: url(images/image1.png), url(images/image2.png);
    background-color: violet;
    background-blend-mode: screen multiply;
}

두 번째 이미지를 가져 와서 곱하기 혼합 모드를 사용하여 배경색과 혼합 한 다음 화면 혼합 모드를 사용하여 첫 번째 이미지와 두 번째 이미지 및 배경색을 혼합합니다. 오버레이를 구현하는 데 사용할 수있는 16 가지 블렌드 모드가 있습니다.

곱하기, 화면, 오버레이, 어둡게, 밝게, 컬러 닷지, 컬러 번, 하드 라이트, 소프트 라이트, 차이, 제외, 색조, 채도, 색상 및 광도.

참조 URL : https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image