ภาพซ้อนทับโปร่งใสสีดำที่วางเมาส์เหนือรูปภาพด้วย 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;
}

ด้วย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

แม้ว่าคุณลักษณะนี้จะใช้งานได้เฉพาะใน webkit และไม่มีความเข้ากันได้ของเบราว์เซอร์แต่ก็ควรดูที่:

.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/understand-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 Filter Blur

คุณอยู่ใกล้ สิ่งนี้จะได้ผล:

.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 รูปภาพแทนการซ้อนทับพิเศษ: 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); }

ดูสิ่งที่ฉันทำที่นี่: 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}

คุณสามารถทำได้โดยเล่นกับความทึบของภาพและตั้งค่าสีพื้นหลังของภาพเป็นสีดำ การทำให้ภาพโปร่งใสจะปรากฏเป็นสีเข้มขึ้น

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