Jump to content
shalendar

:hover opacity

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.

Share this post


Link to post
Share on other sites

without a link to the page it is difficult to visualize the problem.google hoverbox to see a similar effect in a Gallery.

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

check at bonrouge.com or cssplay.co.uk for something like this feature.

Share this post


Link to post
Share on other sites

thanks. i used one of those as a reference and got it to work pretty well.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...