soltek Posted March 28, 2011 Share Posted March 28, 2011 Hey there guys, do you have any idea about this? My purpose is to code a widget displaying some thumbnails with a soft reflection over the image + a small icon. I could do it in photoshop or something, but the images are user submited and well... it would suck if they had to photoshop their images just for the sake of my widget. The solution I (thought I had) found is the CSS property called z-index. I've been using a couple of times but now for some odd reason, I cant make it right. Take a look at my code, please: HTML <div class=entry> <div class=reflection> <div class=thumbnail> <a href=#><img src=URL height=100px></a> </div> </div> </div> CSS .reflection { background-image: url('reflection.png'); height: 109px; width: 82px; margin-bottom: 3px; margin-right: 10px; float: left; position: relative; z-index: 20; } .thumbnail { overflow: hidden; height: 96px; width: 70px; border: 1px solid #5ca6f8; position: absolute; z-index: -100; } .thumbnail img { position: absolute; z-index: -100; } The CSS code is kinda messed up 'cause I've been trying everything xD Thank you in advance. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted March 28, 2011 No z-index is needed for this, also have a read on z-index before applying stuff like -100. Try the following, it works out of the box: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="cfss/style.css" /> <title>z-indexes</title> <style type="text/css"> div.image-wrap{ width:200px; height:200px; overflow:hidden; /*added to remove overlapping */ position:relative; border:2px solid red; } .user-image{ height:200px; } .overlay{ /*this is the star image that has a height and width of 200px */ position:absolute; top:0; left:0; } </style> </head> <body> <div class="image-wrap"> <img class="user-image" src="http://tinyurl.com/6zo9a7z" alt="" /> <img class="overlay" src="http://i52.tinypic.com/rsdefk.png" alt="" /> </div> </body> </html> Good luck! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.