Jump to content

:hover opacity


shalendar
 Share

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...