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. Link to comment https://forums.phpfreaks.com/topic/167864-help-creating-transparant-navigation/ 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 Link to comment https://forums.phpfreaks.com/topic/167864-help-creating-transparant-navigation/#findComment-885412 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? Link to comment https://forums.phpfreaks.com/topic/167864-help-creating-transparant-navigation/#findComment-885814 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. Link to comment https://forums.phpfreaks.com/topic/167864-help-creating-transparant-navigation/#findComment-885908 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 Link to comment https://forums.phpfreaks.com/topic/167864-help-creating-transparant-navigation/#findComment-885990 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.