Solved

css - opacity in container div effecting the other divs

Posted on 2009-05-14
11
620 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

757 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

22 Experts available now in Live!

Get 1:1 Help Now