Hamparan transparan hitam pada gambar hover hanya dengan CSS?

Saya mencoba menambahkan hamparan hitam transparan ke gambar setiap kali mouse mengarahkan kursor ke gambar hanya dengan CSS. Apakah ini mungkin? Saya mencoba ini:

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

Tapi saya tidak bisa menampilkan 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;
}

Saya menyarankan menggunakan elemen pseudo sebagai pengganti elemen overlay. Karena elemen pseudo tidak dapat ditambahkan pada imgelemen tertutup , Anda masih perlu membungkus imgelemen tersebut.

CONTOH LANGSUNG DI SINI - CONTOH DENGAN TEKS

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

Sedangkan untuk CSS, atur dimensi opsional pada .imageelemen, dan posisikan secara relatif. Jika Anda menginginkan gambar yang responsif, hilangkan saja dimensinya dan ini akan tetap berfungsi (contoh) . Perlu dicatat bahwa dimensi harus berada pada elemen induk sebagai lawan dari imgelemen itu sendiri, lihat .

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

Beri imgelemen turunan selebar 100%induknya dan tambahkan vertical-align:topuntuk memperbaiki masalah perataan garis dasar default.

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

Sedangkan untuk elemen pseudo, atur nilai konten dan posisikan secara absolut relatif terhadap .imageelemen. Lebar / tinggi 100%akan memastikan bahwa ini berfungsi dengan berbagai imgdimensi. Jika Anda ingin mentransisikan elemen, setel opasitas 0dan tambahkan properti / nilai transisi.

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

Gunakan opasitas 1saat mengarahkan kursor ke elemen semu untuk memfasilitasi transisi:

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

HASIL AKHIR DI SINI

Jika Anda ingin menambahkan teks saat hover:

Untuk pendekatan paling sederhana, cukup tambahkan teks sebagai nilai elemen semu content:

CONTOH DI SINI

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

    /* Other styling.. */
}

Itu seharusnya bekerja dalam banyak hal; namun, jika Anda memiliki lebih dari satu imgelemen, Anda mungkin tidak ingin teks yang sama muncul saat mengarahkan kursor. Oleh karena itu, Anda dapat menyetel teks dalam data-*atribut dan karenanya memiliki teks unik untuk setiap imgelemen.

CONTOH DI SINI

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

Dengan contentnilai attr(data-content), elemen pseudo menambahkan teks dari atribut .imageelemen data-content:

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

Anda dapat menambahkan beberapa gaya dan melakukan sesuatu seperti ini:

CONTOH DI SINI

Pada contoh di atas, :afterelemen pseudo berfungsi sebagai overlay hitam, sedangkan :beforeelemen pseudo adalah caption / teks. Karena elemen tidak bergantung satu sama lain, Anda dapat menggunakan gaya terpisah untuk pemosisian yang lebih optimal.

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

Filter CSS3

Meskipun fitur ini hanya diterapkan di webkit, dan tidak memiliki kompatibilitas browser , tetapi ada baiknya untuk melihat:

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

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

Demo JSFiddle

Referensi

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

Topik serupa di SO

• Cara Mengurangi Kecerahan Gambar di CSS
• Ubah gambar menjadi grayscale dalam HTML / CSS
• Tepi yang Ditentukan Dengan Filter CSS3 Blur

Anda sudah dekat. Ini akan berhasil:

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

Anda perlu meletakkan :hovergambar di atas, dan membuat .overlaysampul seluruh gambar dengan menambahkan right:0;dan bottom:0.

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

Berikut adalah cara yang baik untuk menggunakan: setelah div gambar, sebagai ganti div overlay ekstra: 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);}

.overlaytidak memiliki tinggi atau lebar dan tidak ada konten, dan Anda tidak dapat mengarahkan kursor ke atas display:none.

Saya malah memberi div ukuran dan posisi yang sama seperti .imagedan mengubah RGBAnilai pada 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); }

Anda dapat melakukannya dengan bermain-main dengan opacity gambar dan mengatur warna latar belakang gambar menjadi hitam. Dengan membuat gambar menjadi transparan, maka akan tampak lebih gelap.

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

Anda mungkin perlu menyetel opasitas khusus browser juga agar ini berfungsi di browser lain juga.

Saya akan memberikan min-height dan min-width ke div overlay Anda dari ukuran gambar, dan mengubah warna latar belakang saat 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;}

Lihat apa yang telah saya lakukan di sini: http://jsfiddle.net/dyarbrough93/c8wEC/

Pertama, Anda tidak pernah mengatur dimensi overlay, yang berarti overlay tidak muncul di tempat pertama. Kedua, saya sarankan hanya mengubah indeks-z hamparan saat Anda mengarahkan kursor ke gambar. Ubah opacity / warna overlay agar sesuai dengan kebutuhan Anda.

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