Solved

css - opacity in container div effecting the other divs

Posted on 2009-05-14
11
622 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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
 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Custom Form Design to Match this example 1 22
remove background quote mark from widget 6 51
How do I set diff properties in a table row? 3 19
Problem to refer to value 8 48
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 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