mallorca Posted August 22, 2015 Share Posted August 22, 2015 (edited) Hello Im having a little trouble making a picture appear when hovering over a text the simple html im using came from another online blog it works however the picture is transparent ---- How can i stop the transparency ?? so you cannot you can see my underneath map & labelling </head> <body> <div class="Object0"><img src="files/Samed Island Map_no bay names %281%29.jpg" alt="" width="1023px" height="1548px"></div><br/> </span></div> <br/> <style type='text/css'> a img { display:none; } a:hover img { display:block;} </style> <div class="Object1"> <a href="#">Ao Noi Na<img src="files/ko-samet-map600.gif"/></a><br/> </span></div> <style type='text/css'> a img { display:none; } a:hover img { display:block; } </style> <div class="Object2"> <a href="#">Ao Klang<img src="http://www.banphe.net/files/newmermaid.jpg"/></a> </span></div> i have a test page im using: http://www.banphe.net/newmap.html Any help would be greatly received, please keep it simple so i can understand it - newbie to this Thank You Phil Edited August 23, 2015 by mallorca Link to comment Share on other sites More sharing options...
Hilal Posted August 24, 2015 Share Posted August 24, 2015 There is no html hover exists you need to make css for hover. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted August 26, 2015 Share Posted August 26, 2015 I don't see anything affecting opacity, so I would suggest that the image itself my be the source of the transparency. I which case there is not you can do in HTML or CSS to adjsut that, you will need to fix the image in a graphics program. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 28, 2015 Share Posted August 28, 2015 (edited) Its nothing to do with transparency/opacity of element or image its to do with div container z-index layering. You have to give the pop-up image div container elements a higher z-index than the others, because you are increasing each consecutively the div elements below it have higher z-index layer level and so they shown above pop-up div. Also, don't place styling in body tag element, place in head element where they should be. Edited August 28, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now