CSS - Change Opacity Of Text When Containing Div Is Hovered

Hi,

Ive coded a page so that there is a coloured div with 30% opacity and then added another div inside it for text but the text also has the 30% opacity... how do i get it to display the text correctly?

Here is my example

Thanks for any help,
Mike

I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>???

Here is a link

http://casadelmar.tmhdesign.com

Thanks.

Hey, I know this is my first post here and it's code support, but this forum's been recommended to me, so here goes:

Right, so I want two little 'mini buttons' that when hovered over, they will expand. I have the concept pretty much figured out; I have a div called 'logo' that everything header-side goes in, I have a div called 'minibuttons' (outlined in blue on the screenshot), and, a div called 'login' which is outlined in green.

Screenshot:



And when minibuttons is hovered over:



But as you can see, it moves the login div too.

Appropriate CSS:

Code:

div.logo
{
	background-image: url("/images/logo.gif");
	border: solid 1px #808080;
	border-bottom: none;
	border-top: none;
	height: 85px;
	margin-left: auto;
	margin-right: auto;
	width: 775px
}

div.login
{
	border: solid 1px #00ff00;
	height: 75px;
	left: 625px;
	position: relative;
	top: -18px;
	width: 145px
}

div.minibuttons
{
	border: solid 1px #0000ff;
	left: 570px;
	position: relative;
	top: 70px;
	width: 48px
}

div.minibuttons:hover
{
	left: 570px;
	position: relative;
	top: 1px;
	width: 48px
}

Appropriate HTML:

Code:

		<div class="logo">
			<div class="minibuttons">
				<a href="http://www.conquerhosting.com"><img src="images/mini/hosting2.gif" alt="H" id="hosting2" onmouseover="over(8)" onmouseout="out(8)" /></a>
				&nbsp;<a href="http://www.conquerdesigning.com"><img src="images/mini/designing.gif" alt="D" id="designing" onmouseover="over(9)" onmouseout="out(9)" /></a>
			</div>
			<div class="login">
				<form id="login" method="post" action="http://<?=$_SERVER["HTTP_HOST"]?>:2082/login" onsubmit="disable()">
					<fieldset class="login">
				  		<input type="text" name="user" value="username" class="login" onfocus="clearbox(this)" /><br />
			  			<input type="password" name="pass" value="password" class="login" onfocus="clearbox(this)" /><br />
						<select class="service" name="service">
							<option value="2082">cPanel</option>
						</select>
			  			<input type="submit" name="login" value="Login" class="button" />
					</fieldset>
				</form>
			</div>
		</div>

Appropriate JS:

Code:

if (document.images)
{
	var flipped = new Array();
	for(i=0; i< inames.length; i++)
	{
    	flipped[i] = new Image();
		if(i <= 7)
	    flipped[i].src = "/images/roll/"+inames[i]+".gif";
		if(i > 7 && i <= 9)
	    flipped[i].src = "/images/full/"+inames[i]+".gif";
	}
}

function over(num)
{
	if(document.images)
	{
    	revert[num] = document.images[inames[num]].src;
		document.images[inames[num]].src = flipped[num].src;
	}
}
function out(num)
{
	if(document.images)
	document.images[inames[num]].src = revert[num];
}

Any ideas people?

Thanks,
Danny.

Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares?


CSS
Code:

    
    DIV.outer
      {
      position:absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 488px;
	  border:2px solid white;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      }
    DIV.inner
      {
      position:absolute;
      left: 50%;
      top :50%;
   	  width: 500px;
      height: 488px;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      background-color:#CC6666;
	  filter:alpha(opacity=50);
	  -moz-opacity:.50;
	  opacity:.50;		
      }

	div.tn
	{
	position:absolute;
	width:115px; 
	height:115px;
	background-color: #660000; 
	layer-background-color: #660000; 
	border: 1px none #000000;

	}

HTML
Code:

<div class="outer">        
     <p>&nbsp;</p>
   <div class="inner">  
 <!--row 1!-->
     <div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 2!-->	 
	 <div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 3!-->
	 <div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
  </div>  
</div>

What i'm trying to get at here is how do I get non transparent items in a transparent div box?

I am on a web site which allows the user to customize certain aspects of your pages. The site inserts a search button with the title "Go" inside a form. I'd like to change the text to "Search".

I have no way to access the xhtml because the site inserts it into the page and I can't replace the form with one of my own because non site generated forms are not allowed due to security; however, we can modify the button in question since lines like this work:


Puts image behind button:
.productSearchCell button {background: url("http://url");}

Removes button:
.productSearchCell button {display:none;}


1. Can I change the text from "Go" to "Search" using a css override?

OR

2. Can I get rid of the text altogether and instead place an image on top of the button with a CSS overide? The background code above places the image behind the button instead of on top of it.

OR

3. Make the site's generic button invisible and use my own image button to trigger the form inserted by the site. I really would like to use this method, but it has to be a CSS override as we can't touch the use the form tag in the xhtml section of code we can edit.



Code:

<div class="productSearchCell">
<div class="hr"></div>
<h3>Search this Store </h3>
<div class="clearfix">
<form action="http://url">
<div>

<input type="text" id="page_module0-queryInput" name="qs" value="" size="14" /><button type="submit" class="inline"><span class="buttonLeft"><span class="buttonRight">Go</span></span></button>

</div>
</form>
</div>
<a class="inlineActionLink" href="url">View all Products</a>
</div>

I'm having a mental block this should be really easy.

I have an image rollover set up

a:hover.deb {background:url(images/deb.jpg);}

but I also want it to display some text elsewhere on the page

many thanks

Hello,

I am using a template, and i was wondering if i can have a css code on the top of the template code so it says that any words, or text will be in a font??

i do not know css and right now i don't have the time too, i will learn it later on, over the summer, but as of now i am busy

Thanks

I have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css:

.navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span {
color: #FFFFFF;
}

What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color?

I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks.

I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want.

simple example:

CSS:
Code:

a:link, a:visited, a:active {
    font-size: 1em;
}
a:hover {
    font-size: 1.5em;
}

HTML:
Code:

<div>
    <a href="#">Text</a>
</div>

Hi everyone,

I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not.

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located.

To get a visual you can check the website (just remove the *)
*onholdmusicsource*.com

In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

Comments would be fine
Ideas would be great
Solutions would be fantastic

Many Thanks-

I'm assuming this is going to be a CSS issue. I have a table cell which contains text, and for the sake of accessibility, I'm allowing text resizing and would like to prevent the table cell from changing in height when the font size is increased. Basically, as the font size increases, the width of the cell is the only thing that will change, not the height. First, is this possible? Second, if so how can this be achieved?

I'm pretty sure that I've seen other sites do this, just can't remember where.

Thanks in advance!

Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either.


Code:

body
{
   background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
	top:0;
	width: 100%;
	height: 900px; 

Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css.

Help will be greatly appreciated

EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts.

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity.


The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ?

And another question... how can i set an opacity for Opera Browsers ?