Solved

css - opacity in container div effecting the other divs

Posted on 2009-05-14
11
621 Views
Last Modified: 2012-05-07
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
Comment
Question by:phillystyle123
  • 6
  • 5
11 Comments
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24390237
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24390354
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
 

Author Comment

by:phillystyle123
ID: 24390367
what's the simplest solution?
0
 

Author Comment

by:phillystyle123
ID: 24390390
oh man - there's gotta be a simpler solution than digging into yet another solution!
0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 500 total points
ID: 24390490
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:phillystyle123
ID: 24390522
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24390575
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
 

Author Closing Comment

by:phillystyle123
ID: 31581702
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24390618
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
 

Author Comment

by:phillystyle123
ID: 24390637
gracias !
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24390640
You're welcome.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now