css3 - Black transparent overlay on image hover with only CSS? -

i'm trying add transparent black overlay image whenever mouse hovering on image css. possible? tried this:

http://jsfiddle.net/zf5am/565/

but can't div show up.

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

i'd suggest using pseudo element in place of overlay element. because pseudo elements can't added on enclosed img elements, still need wrap img element though.

live example here -- example text

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

as css, set optional dimensions on .image element, , relatively position it. if aiming responsive image, omit dimensions , still work (example). it's worth noting dimensions must on parent element opposed img element itself, see.

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

give child img element width of 100% of parent , add vertical-align:top fix default baseline alignment issues.

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

as pseudo element, set content value , absolutely position relative .image element. width/height of 100% ensure works varying img dimensions. if want transition element, set opacity of 0 , add transition properties/values.

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

use opacity of 1 when hovering on pseudo element in order facilitate transition:

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

end result here

---

if want add text on hover:

for simplest approach, add text pseudo element's content value:

example here

.image:after {     content: 'here text..';     color: #fff;      /* other styling.. */ } 

that should work in instances; however, if have more 1 img element, might not want same text appear on hover. therefore set text in data-* attribute , therefore have unique text every img element.

example here

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

with content value of attr(data-content), pseudo element adds text .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 styling , this:

example here

in above example, :after pseudo element serves black overlay, while :before pseudo element caption/text. since elements independent of each other, can use separate styling more optimal positioning.

.image:after, .image:before {     position: absolute;     opacity: 0;     transition: 0.5s;     -webkit-transition: 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; }