shalendar Posted March 19, 2008 Share Posted March 19, 2008 There is another topic on this issue, but the rules say i cant hijack so i'm starting another topic.i'm making a photo gallery. this is whats suposed to happen: when you hover over the image thumbnail, the image gets transparent and a box pops up that says "click to view image". this what actually happens: in IE7: the image does not go transparent. the box pops up, but is also not transparent. and the image desciption shifts down, affecting all the images below it.in FF: the image goes transparent,and the transparent box pops up. but the description still shifts down screwing up all the other images.heres the divs: <div class='m-wrap'> <div class='m-img'> <a href='images/no-pic.jpg' target='new window' ><img src='images/no-pic.jpg' /></a> <div class='popup'><b>click to view image</b></div> </div> <div class='m-descript'> No description available. </div> </div> heres the css: div.m-wrap { display:block; text-align:center; float:left; margin:10px; padding:0px;}div.m-wrap div.m-img { display:inline; padding:0px; height:154px; width:154px; border:1px solid #0000ff;}div.m-wrap div.m-img img { text-align:center; height:150px; width:150px; padding:0px; margin:0px; border:2px solid #dedede;}div.m-wrap div.m-img:hover { filter:alpha(opacity=50); opacity:0.5; background:#dedede;}div.m-wrap div.m-img img:hover { border:2px solid #000000;}div.m-wrap div.m-img div.popup { background: #ffffff; border: 1px solid #000000; filter:alpha(opacity=75); opacity:0.75; display:none; position:relative; z-index:5; left:0px; top:-100px;}div.m-wrap div.m-img:hover div.popup { display:block;}div.m-wrap div.m-descript { text-align:center; font: 10px arial; position:relative; display:block;} Heres the code in action:http://www.e3studentMinistries.orggo to the media tab, then photos or graphics tab. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 19, 2008 Share Posted March 19, 2008 without a link to the page it is difficult to visualize the problem.google hoverbox to see a similar effect in a Gallery. Link to comment Share on other sites More sharing options...
shalendar Posted March 19, 2008 Author Share Posted March 19, 2008 i posted a link to the page!here it is again: Heres the code in action:http://www.e3studentMinistries.orggo to the media tab, then photos or graphics tab. Link to comment Share on other sites More sharing options...
jesh Posted March 19, 2008 Share Posted March 19, 2008 i posted a link to the page!here it is again:The body of that webpage consists solely of:<div id='enter'><b>.</b>ENTER<b>.</b></div> Link to comment Share on other sites More sharing options...
shalendar Posted March 19, 2008 Author Share Posted March 19, 2008 sorry, i was working on it at that time. its fixed now. you have to click the enter link or just go here:http://www.e3studentministries.org/home.phpEdit: if you can find a way to get it to work, thats fine, but i just removed the description and the popup box. it works fine with out all that. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 20, 2008 Share Posted March 20, 2008 check at bonrouge.com or cssplay.co.uk for something like this feature. Link to comment Share on other sites More sharing options...
shalendar Posted March 21, 2008 Author Share Posted March 21, 2008 thanks. i used one of those as a reference and got it to work pretty well. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.