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; }
if want add text on hover:
for simplest approach, add text pseudo element's content
value:
.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.
.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:
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; }
Comments
Post a Comment