Lớp phủ trong suốt màu đen trên di chuột qua hình ảnh chỉ với CSS?

Tôi đang cố gắng thêm lớp phủ màu đen trong suốt vào hình ảnh bất cứ khi nào con chuột di chuột qua hình ảnh chỉ có CSS. Điều này có khả thi không? Tôi đã thử điều này:

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

Nhưng tôi không thể làm cho div hiển thị.

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

Tôi khuyên bạn nên sử dụng phần tử giả thay cho phần tử lớp phủ. Bởi vì các phần tử giả không thể được thêm vào imgcác phần tử kèm theo , bạn vẫn cần phải bọc imgphần tử đó.

VÍ DỤ TRỰC TIẾP TẠI ĐÂY - VÍ DỤ VỚI VĂN BẢN

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

Đối với CSS, hãy đặt các kích thước tùy chọn trên .imagephần tử và định vị nó một cách tương đối. Nếu bạn đang nhắm đến một hình ảnh đáp ứng, chỉ cần bỏ qua các kích thước và điều này sẽ vẫn hoạt động (ví dụ) . Nó chỉ đáng chú ý là kích thước phải nằm trên yếu tố phụ huynh như trái ngược với các imgyếu tố bản thân, nhìn thấy .

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

Cung cấp cho imgphần tử con có chiều rộng bằng phần tử 100%gốc và thêm vertical-align:topvào để khắc phục sự cố căn chỉnh đường cơ sở mặc định.

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

Đối với phần tử giả, hãy đặt một giá trị nội dung và hoàn toàn đặt nó so với .imagephần tử. Chiều rộng / chiều cao của 100%sẽ đảm bảo rằng điều này hoạt động với các imgkích thước khác nhau . Nếu bạn muốn chuyển đổi phần tử, hãy đặt độ mờ 0và thêm các thuộc tính / giá trị chuyển đổi.

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

Sử dụng độ mờ 1khi di chuột qua phần tử giả để tạo điều kiện chuyển đổi:

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

KẾT QUẢ KẾT QUẢ TẠI ĐÂY

Nếu bạn muốn thêm văn bản khi di chuột:

Đối với cách tiếp cận đơn giản nhất, chỉ cần thêm văn bản làm contentgiá trị của phần tử giả :

VÍ DỤ TẠI ĐÂY

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

    /* Other styling.. */
}

Điều đó sẽ hoạt động trong hầu hết các trường hợp; tuy nhiên, nếu bạn có nhiều hơn một imgphần tử, bạn có thể không muốn cùng một văn bản xuất hiện khi di chuột. Do đó, bạn có thể đặt văn bản trong một data-*thuộc tính và do đó có văn bản duy nhất cho mọi imgphần tử.

VÍ DỤ TẠI ĐÂY

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

Với contentgiá trị là attr(data-content), phần tử giả sẽ thêm văn bản từ thuộc tính .imagecủa phần tử data-content:

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

Bạn có thể thêm một số kiểu và làm như sau:

VÍ DỤ TẠI ĐÂY

Trong ví dụ trên, :afterphần tử giả đóng vai trò là lớp phủ màu đen, trong khi :beforephần tử giả là chú thích / văn bản. Vì các phần tử độc lập với nhau, bạn có thể sử dụng kiểu dáng riêng biệt để định vị tối ưu hơn.

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

Bộ lọc CSS3

Mặc dù tính năng này chỉ được triển khai trong webkit và nó không có khả năng tương thích với trình duyệt , nhưng bạn nên xem qua:

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

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

JSFiddle Demo

Người giới thiệu

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/und hieu-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/

Các chủ đề tương tự trên SO

• Cách giảm độ sáng của ảnh trong CSS
• Chuyển đổi hình ảnh sang thang độ xám trong HTML / CSS
• Các cạnh được xác định với bộ lọc CSS3 Blur

Bạn đã gần. Điều này sẽ hoạt động:

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

Bạn cần đặt :hoverhình ảnh trên và tạo .overlaytrang bìa cho toàn bộ hình ảnh bằng cách thêm right:0;và bottom:0.

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

Đây là một cách hay bằng cách sử dụng: sau trên div hình ảnh, thay vì div thêm lớp phủ: 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);}

.overlaykhông có chiều cao hoặc chiều rộng và không có nội dung và bạn không thể di chuột qua display:none.

Thay vào đó, tôi đã cung cấp cho div có cùng kích thước và vị trí .imagevà thay đổi RGBAgiá trị khi di chuột.

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

Bạn có thể thực hiện điều này bằng cách thử với độ mờ của hình ảnh và đặt màu nền của hình ảnh thành màu đen. Bằng cách làm cho hình ảnh trong suốt, nó sẽ có vẻ tối hơn.

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

Bạn cũng có thể cần đặt độ mờ của trình duyệt cụ thể để làm cho điều này cũng hoạt động trong các trình duyệt khác.

Tôi sẽ cung cấp chiều cao tối thiểu và chiều rộng tối thiểu cho div lớp phủ của bạn về kích thước của hình ảnh và thay đổi màu nền khi di chuột

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

Xem những gì tôi đã làm ở đây: http://jsfiddle.net/dyarbrough93/c8wEC/

Trước hết, bạn không bao giờ đặt kích thước của lớp phủ, có nghĩa là nó không hiển thị ngay từ đầu. Thứ hai, tôi khuyên bạn chỉ nên thay đổi chỉ số z của lớp phủ khi bạn di chuột qua hình ảnh. Thay đổi độ mờ / màu của lớp phủ để phù hợp với nhu cầu của bạn.

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