CSS 만있는 이미지 호버에 검은 색 투명 오버레이?

CSS 만있는 이미지 호버에 검은 색 투명 오버레이?

---

마우스가 CSS 만있는 이미지 위로 마우스를 가져갈 때마다 이미지에 투명한 검은 색 오버레이를 추가하려고합니다. 이게 가능해? 나는 이것을 시도했다 :

http://jsfiddle.net/Zf5am/565/

하지만 div를 표시 할 수 없습니다.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

---

오버레이 요소 대신 의사 요소를 사용하는 것이 좋습니다. 닫힌 img요소에는 유사 요소를 추가 할 수 없기 때문에 img그래도 요소 를 래핑해야합니다 .

여기 라이브 예 - 텍스트가있는 예

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

CSS의 경우 요소 에 선택적 크기 를 설정 .image하고 상대적으로 배치합니다. 반응 형 이미지를 목표로하는 경우 치수를 생략하면 여전히 작동합니다 (예제) . 차원은 img요소 자체가 아닌 부모 요소에 있어야합니다 .을 참조하십시오 .

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

자식 img요소에 100%부모 너비를 지정 하고 추가 vertical-align:top하여 기본 기준선 정렬 문제를 수정합니다.

.image img {
    width: 100%;
    vertical-align: top;
}

의사 요소의 경우 콘텐츠 값을 설정하고 .image요소를 기준으로 절대 위치를 지정합니다 . 너비 / 높이는 100%다양한 img크기에서 작동 합니다. 요소를 전환하려면 불투명도를 설정 0하고 전환 속성 / 값을 추가합니다.

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

1전환을 용이하게하기 위해 가상 요소 위에 마우스를 올릴 때 불투명도를 사용합니다 .

.image:hover:after {
    opacity: 1;
}

여기에서 결과 종료

---

마우스 오버시 텍스트를 추가하려면 :

가장 간단한 방법은 텍스트를 의사 요소의 content값 으로 추가하는 것입니다 .

여기에 예

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

That should work in most instances; however, if you have more than one img element, you might not want the same text to appear on hover. You could therefore set the text in a data-* attribute and therefore have unique text for every img element.

EXAMPLE HERE

.image:after {
    content: attr(data-content);
    color: #fff;
}

With a content value of attr(data-content), the pseudo element adds the text from the .image element's data-content attribute:

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

You can add some styling and do something like this:

EXAMPLE HERE

In the above example, the :after pseudo element serves as the black overlay, while the :before pseudo element is the caption/text. Since the elements are independent of each other, you can use separate styling for more optimal positioning.

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}

---

CSS3 filter

Although this feature is only implemented in webkit, and it doesn't have browser compatibility, but It's worth taking a look at:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddle Demo

References

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Similar topics on SO

• How to Decrease Image Brightness in CSS
• Convert an image to grayscale in HTML/CSS
• Defined Edges With CSS3 Filter Blur

---

You were close. This will work:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

You needed to put the :hover on image, and make the .overlay cover the whole image by adding right:0; and bottom:0.

jsfiddle: http://jsfiddle.net/Zf5am/569/

---

Here's a good way using :after on the image div, instead of the extra overlay div: http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

---

.overlay didn't have a height or width and no content, and you can't hover over display:none.

I instead gave the div the same size and position as .image and changes RGBA value on hover.

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

---

You can accomplish this by playing with the opacity of the image and setting the background color of the image to black. By making the image transparent, it will appear darker.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div> 

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

You might need to set the browser-specific opacity too to make this work in other browsers too.

---

I would give a min-height and min-width to your overlay div of the size of the image, and change the background color on hover

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}

---

See what I've done here: http://jsfiddle.net/dyarbrough93/c8wEC/

First off, you never set the dimensions of the overlay, meaning it wasn't showing up in the first place. Secondly, I recommend just changing the z-index of the overlay when you hover over the image. Change the opacity / color of the overlay to suit your needs.

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}

참고URL : https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css