godster Posted July 28, 2009 Share Posted July 28, 2009 Hi guys. I'm trying to create a navigation which is initally semi transparant but on hovering over the link, displays full opacity. I was attempting to do this in Photoshop with no success. I have tried again and again to create both tiles as PNG-24, which i'd repeat across the Div in CSS, or preferably the transparant section slices that will form the completed navigation (primarily so that I can retain the rounded edges). I have seen this implemented on some sites but cannt for the life of me figure out how i'd do this. Am I doing something wrong in Photoshop or the CSS itself? When I preview my web slices in Photoshop they are showing as solid and not transparant. Some step by step tutorial would be great. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
lonewolf217 Posted July 28, 2009 Share Posted July 28, 2009 do you have sample code ? If you are using photoshop I assume you have your own icons to use for the navigation. If this is the case I would probably say to put each icon into its own div and then use css/javascript to change the opacity on hover Quote Link to comment Share on other sites More sharing options...
godster Posted July 29, 2009 Author Share Posted July 29, 2009 Apologies, no code to hand. I have managed now to change the opacity by using the relevant CSS commands for IE and Firefox, but am still not able to fully create the style i was hoping to achieve. It must be relatively simple to create a semi-transparent container/div over which I'd ad text for example. Have tried doing this with a 2x2 PNG-24 image with 70% opacity from Photopshop repeated across the contained to no avail. Are there any tutorials that might help me figure out what I'm doing wrong? Quote Link to comment Share on other sites More sharing options...
haku Posted July 29, 2009 Share Posted July 29, 2009 I've done this in the past using two images - a transparent one and an opaque one, swapping them with a rollover effect. This way you don't have to play with opacity of elements. Quote Link to comment Share on other sites More sharing options...
tbare Posted July 29, 2009 Share Posted July 29, 2009 I've done this in the past using two images - a transparent one and an opaque one, swapping them with a rollover effect. This way you don't have to play with opacity of elements. I've done the same using li:hover { background: url('./images/opaque.png'); } seams to be the easiest and a lot less processor intensive on the user's PC 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.