pogmoorsSip
New Member
I'm having an issue in chrome and safari to display correctly my rollover div above my container image. What I have done work some times, but when we are resizing the page, we can see sometime a little gap of 1 or 2 pixels between my rollover div and my image container.I have done a demo here: http://jsfiddle.net/eJNsS/9/Screenshot
Html:\[code\]<div id="related_projects"> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG1</h2></div></a> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG2</h2></div></a> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG3</h2></div></a> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG4</h2></div></a> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG5</h2></div></a> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG6</h2></div></a> <a href=http://stackoverflow.com/questions/15558391/# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG7</h2></div></a> \[/code\]Css:\[code\]#related_projects { background-color:#FFFF44; margin-bottom: 20px; position: relative; top: 0; left: 0; overflow: hidden; margin-bottom: 20px; display: block; margin-top: 2%;}#related_projects .thumbnail_image_related_project{ width: 23%; position: relative; float: left; top: 0; left: 0; margin-left: 1%; margin-right: 1%; margin-top: 0%; margin-bottom: 2%; overflow: hidden; line-height: 0;}#related_projects img { width: 100% !important; height: auto;}#related_projects p, #categories_container #left p{ text-align: left; color: black; font-family: HermL, Arial, sans-serif; font-size: 17px; line-height: 23px; margin-bottom: 20px;}#link_description {float: left;width: 98%;margin-left: 1%;margin-right: 1%;}#link_description #link{ width: 50%; float: right; color: black; font-family: HermL, Arial, sans-serif; font-size: 17px; line-height: 23px;}#link_description #link a { color: #666666; font-family: HermL, Arial, sans-serif; font-size: 17px;}#link_description #link a:hover{ color: #22B573; font-family: HermL, Arial, sans-serif; font-size: 17px;}/* THUMBNAIL PICTURES-------------------------------------------------------------- */.thumbnail_image_related_project .transparent_font{ line-height: 1.25em; position: absolute; top: 0; left: 0; color: black; background-color:white; width: 92%; padding-right: 3%; height: 100%; opacity:1; padding-left: 5%; filter: alpha(opacity=0);}.thumbnail_image_related_project h2 { padding-top: 30px; text-align: left; color: black; font-family: HermL, Arial, sans-serif; font-size: 17px; line-height: 23px;}h2 { margin:0px;}}\[/code\]Jquery :\[code\] $(".thumbnail_image_related_project").hover( function(){ $(this).children(".transparent_font").stop().animate({'opacity' : '0.7', 'padding-top': '10px'}, 300); } ,function(){$(this).children(".transparent_font").stop().animate({'opacity' : '0', 'padding-top': '30px'}, 300);} );\[/code\]Thanks for helping