CSS Background Hover Text

Question

I have a background image that is getting set an opacity 0.3, then when hovering, getting set to 0.8, as seen in the css code.

The image code.

<td background="images/1a.png" class="logo" width="160" height="160">
    <div class="ch-info">
        <h3><br>Add New Deal</h3>
    </div>
</td>

The css code.

.ch-info {
    letter-spacing: 2px;
    font-size: 20px;
/*  margin: 0 30px; 
    padding: 45px 0 0 0;*/
    height: 140px;
    font-family: 'Open Sans', Arial, sans-serif;
    -webkit-text-stroke: 1px black;
    color: #d3d3d3;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    vertical-align:middle;
    text-align:center;
}
.logo
{
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
    background-repeat:no-repeat;
    background-position:center; 
}
.logo:hover
{
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */ 
    background-repeat:no-repeat;
    background-position:center;
}

The text and the background do the hovering effect, I want the text to stay solid, and the background to hover at a 0.8 when the mouse is over the background and the Text to stay Solid regardless if the background is hovered or not.

Answer 1

As I stated in the comments, children inherit opacity from their parent. The .ch-info class inherits its opacity from .logo , so you cannot have the immediate parent be .logo .

That being said, just have a <div class="logo"></div> before .ch-info that uses position: absolute; , is the same height as either the <td> or .ch-info , and has the desired background... However, you would have to use position:relative; on .ch-info so the z-index does not become a problem.

DEMO: http://jsfiddle.net/dirtyd77/mSg97/3/

HTML:

<table>
<tr>
    <td width="160" height="160">
        <div class="logo" style="background:blue;"></div>
        <div class="ch-info">
             <h3>Add New Deal</h3>
        </div>
    </td>
</tr>
 <tr>
    <td width="160" height="160">
        <div class="logo" style="background:red;"></div>
        <div class="ch-info">
             <h3>Add New Deal</h3>
        </div>
    </td>
</tr>
<tr>
    <td width="160" height="160">
        <div class="logo" style="background:orange;"></div>
        <div class="ch-info">
             <h3>Add New Deal</h3>
        </div>
    </td>
</tr>

CSS:

.logo
{
    width:160px; 
    height:160px;
    position:absolute;
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
    background-repeat:no-repeat;
    background-position:center; 
}
.logo:hover
{
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */ 
}
.ch-info {
    letter-spacing: 2px;
    font-size: 20px;
/*  margin: 0 30px; 
    padding: 45px 0 0 0;*/
    font-family: 'Open Sans', Arial, sans-serif;
    -webkit-text-stroke: 1px black;
    color: #d3d3d3;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    vertical-align:middle;
    text-align:center;
    position:relative;
}

Let me know if you have any questions.

---

EDIT: However, this situation seems better suited for jQuery. I have provided an example below.

DEMO: http://jsfiddle.net/dirtyd77/mSg97/4/

Answer 2

Try to add this css class

.logo:hover .ch-info {
    opacity: 0.375;
}

Answer 3

Have you tried specifying the font, etc., inside of the ".logo:hover"?

    .logo:hover
    {
        opacity:0.8;
        filter:alpha(opacity=80); /* For IE8 and earlier */ 
        background-repeat:no-repeat;
        background-position:center;
        letter-spacing: 2px;
        font-size: 20px;
        height: 140px;
        font-family: 'Open Sans', Arial, sans-serif;
        -webkit-text-stroke: 1px black;
        color: #d3d3d3;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        vertical-align:middle;
        text-align:center;
    }