html - Text over image gets hidden when a filter is applied to the image -
in illustration below text in h1 element hidden when filter applied image, , visible when filter disabled or turned off (set none, or deleted css applied img tag):
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <style> .item { position: relative; height: 500px; } h1 { height: auto; font-size: 30px; color:white; margin-top: -50%; } img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } </style> </head> <body> <div class="item"> <img src="image.jpg" height="500" /> <h1>some text</h1> </div> </body> </html> why happening?
i don't know what's happen, can fixed bug add together position property h1
css :
h1 { position:relative; height: auto; font-size: 30px; color:#000; margin-top: -50%; } and think alter img:hover .item:hover img have hover when hover h1
demo : http://jsfiddle.net/z3mvu/4/
html css html5 css3
No comments:
Post a Comment