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.. */
}

즉 한다 대부분의 경우에 작동; 그러나 img요소 가 두 개 이상있는 경우 마우스 오버시 동일한 텍스트가 표시되지 않도록 할 수 있습니다. 따라서 data-*속성에 텍스트를 설정할 수 있으므로 모든 img요소에 대해 고유 한 텍스트를 가질 수 있습니다 .

여기에 예

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

A의 content값 attr(data-content), 의사 요소는에서 텍스트 추가 .image요소의 data-content속성을 :

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

스타일을 추가하고 다음과 같이 할 수 있습니다.

여기에 예

위의 예에서 :after의사 요소는 검은 색 오버레이 역할을하고 :before의사 요소는 캡션 / 텍스트입니다. 요소는 서로 독립적이므로보다 최적의 위치 지정을 위해 별도의 스타일을 사용할 수 있습니다.

.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 필터

이 기능은 웹킷에서만 구현되고 브라우저 호환성 이 없지만 살펴볼 가치가 있습니다.

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

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

JSFiddle 데모

참고 문헌

• 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/

SO에 대한 유사한 주제

• CSS에서 이미지 밝기를 줄이는 방법
• HTML / CSS에서 이미지를 회색조로 변환
• CSS3 필터 블러로 정의 된 가장자리

당신은 가까웠습니다. 이것은 작동합니다.

.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; }

당신 :hover은 이미지 를 넣어야했고 , .overlay추가 right:0;하고 추가하여 전체 이미지를 표지로 만들어야했습니다.bottom:0 .

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

다음은 추가 오버레이 div 대신 이미지 div에 : after를 사용하는 좋은 방법입니다. 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 높이나 너비가없고 콘텐츠도없고 마우스를 올려 놓을 수 없습니다. display:none .

대신 div에 동일한 크기와 위치를 부여하고 마우스 오버시 값을 .image변경 RGBA합니다.

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); }

이미지의 불투명도로 재생하고 이미지의 배경색을 검은 색으로 설정하여이를 수행 할 수 있습니다. 이미지를 투명하게 만들면 더 어둡게 보입니다.

<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 }

다른 브라우저에서도 작동하도록하려면 브라우저 별 불투명도를 설정해야 할 수도 있습니다.

이미지 크기의 오버레이 div에 최소 높이와 최소 너비를 부여하고 마우스 오버시 배경색을 변경합니다.

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

내가 한 일을 참조하십시오 : http://jsfiddle.net/dyarbrough93/c8wEC/

우선, 오버레이의 크기를 설정하지 않았습니다. 즉, 처음에 표시되지 않았습니다. 둘째, 이미지 위로 마우스를 가져갈 때 오버레이의 Z- 색인을 변경하는 것이 좋습니다. 필요에 맞게 오버레이의 불투명도 / 색상을 변경하십시오.

.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}