Jump to content

:hover opacity


shalendar

Recommended Posts

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...