Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 630
  • Last Modified:

css - opacity in container div effecting the other divs

hi there -

fooling around with this modal window:

http://ctemps.cjehost.com/subgallery_4column_with_test.php (mouseover the 1st thumb)

i've set the opacity of the container div to 50% but i need the contents to be set to 100% - i've set the img and the img container div to 100% but i'm still seeing the 50% opacity on them - styles attached - thanks!
.leftColCTN{
width:280px;
float:left;
}
	.QVPic{
	border:1px solid #c6cdcb;
	float:left;
	width:199px;
	padding:15px;
	filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
	}
	.QVPic img{filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
	}

Open in new window

0
phillystyle123
Asked:
phillystyle123
  • 6
  • 5
1 Solution
 
Tony van SchaikFront-end Web developerCommented:
That's because you have the same class .QVPic img for the image so it applies the styles of your parent div. And a div inside a div will always use the same styles with the same class.
0
 
Tony van SchaikFront-end Web developerCommented:
You could try it with Javascript for example with jQuery these are the default jQuery effects: http://docs.jquery.com/Effects
There are also a lot of plugins with a lightbox that have parameters for opacity http://colorpowered.com/colorbox/core/example1/index.html
http://leandrovieira.com/projects/jquery/lightbox/
http://paulgriffinpetty.com/2009/03/28/jquery-opacity-and-rollovers/
I'm using this tooltip with a image preview with opacity on my website: http://www.bmwvideopost.com with this plugin http://jquery.bassistance.de/tooltip/demo/
Hope this helps you out.
 
 
0
 
phillystyle123Author Commented:
what's the simplest solution?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
phillystyle123Author Commented:
oh man - there's gotta be a simpler solution than digging into yet another solution!
0
 
Tony van SchaikFront-end Web developerCommented:
You could try this: http://www.hedgerwow.com/360/dhtml/css-opacity-inherit.html
Otherwise i would make an 1px 50% transparent image in Photoshop and place that in your CSS. But still this doesn't work for your 1px border.
.QVPic {
background:url(images/50perctransparent.png) repeat center left;
}
Good luck
0
 
phillystyle123Author Commented:
I think you're missing something. I'm using .CTN to set the opacity of the window. Then, I'm using an different class "QVPic to set the opacity of the graphic:

.CTN
{
width:565px;
height:430px;
background:#fff;
border:1px solid #ccc;
filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
}
.leftColCTN{
width:280px;
float:left;
}
      .QVPic{
      border:1px solid #c6cdcb;
      float:left;
      width:199px;
      padding:15px;
      margin:30px 0 0 30px;
      filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
      }
0
 
Tony van SchaikFront-end Web developerCommented:
That was missing in your code snippet but it will not work if.
<div class="CTN"> with opacity 50%
<div class="QVPic"> with opacity 100% this will always have 50% because it's inside the .CTN div.
</div>
</div>
Unfortunatly we can't change the Web Standards. CSS3 will have opacity in the future.
0
 
phillystyle123Author Commented:
never had a lot of luck with opacity - thanks for the help - i ended up using a png - can you point me toward a js i can use for the way IE deals with transparent pngs? thanks again.
0
 
Tony van SchaikFront-end Web developerCommented:
Only IE6 doesnt support PNG. But Microsoft will send all IE6 and IE7 user a notification to upgrade to IE8 in a couple of weeks,  because the old versions have all lot of security issues and other issues. There are PNGfix javascripts to fix it. But i don't use it. http://homepage.ntlworld.com/bobosola/pnghowto.htm
0
 
phillystyle123Author Commented:
gracias !
0
 
Tony van SchaikFront-end Web developerCommented:
You're welcome.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now