[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

css - opacity in container div effecting the other divs

Posted on 2009-05-14
11
Medium Priority
?
634 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
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 

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 2000 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
 

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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month11 days, 3 hours left to enroll

612 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