#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    CSS opacity w/ hover not working correctly


    Code:
    .trivlimp {
    	z-indec: 2;
    	background: url(http://i.imgur.com/TbfPl.png);
    	width: 260px;
    	height: 400px;
    	text-align: center; 
    	opacity: 1.0;
    
    }
    
    .trivlimp:hover {
    	-webkit-transition: opacity 0.2s ease-in-out; 
    	-moz-transition: opacity 0.2s ease-in-out; 
    	-o-transition: opacity 0.2s ease-in-out; 
    	opacity: 0.0; 
    	-moz-opacity: 0.0; 
    	-webkit-transition-delay: 0.4s; 
    	-moz-transition-delay: 0.4s; 
    	-o-transition-delay: 0.4s;
    }
    
    .imp {
    	z-index: 1;
    	margin-top: -465px;
            width: 260px;
            height: 400px;
            background: url(http://i.imgur.com/TbfPl.png);
     }
    
    .lyrics {
        margin-top: 5%;
        background: url(http://i.imgur.com/Pls2N.png);
        width: 180px;
        padding: 5px;
        height: 130px
        overflow: auto;
        text-align: justify;
        text-transform: uppercase;
        font-family: Georgia;
        font-style: italic;
        font-size: 10px;
        line-height: 10px;
    }
    
    .lyrics:hover {
    	-webkit-transition: opacity 0.4s ease-in-out; 
    	-moz-transition: opacity 0.4s ease-in-out; 
    	-o-transition: opacity 0.4s ease-in-out; 
    	opacity: 0.0; 
    	-webkit-transition-delay: 0.4s; 
    	-moz-transition-delay: 0.4s; 
    	-o-transition-delay: 0.4s;
    }
    
    .trgls {
        width: 190px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: right;
        margin-right: 35px;
        background: url(http://i.imgur.com/Pls2N.png);
        text-transform: uppercase;
    }
    
    .trals {
        width: 170px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: right;
        margin-right: 35px;
        background: url(http://i.imgur.com/Pls2N.png);
        text-transform: uppercase;
    }
    
    .trpc {
        width: 150px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: right;
        margin-right: 35px;
        background: url(http://i.imgur.com/Pls2N.png);
        text-transform: uppercase;
    }
    
    .trttr {
        width: 130px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: right;
        margin-right: 35px;
        background: url(http://i.imgur.com/Pls2N.png);
        text-transform: uppercase;
    }
    With the above CSS I am trying to make the table "imp" appear when the table "trivlimp" is hovered over; now so far I have been able to do this with two exceptions: the table "imp" isn't hidden in the normal state (when nothing is being hovered over), and the div "lyrics" isn't displaying it's background, but it does display the text. You can see this at my wip site here. If anyone can direct me where I'm going wrong with this, I would appreciate it.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Can you post your HTML?

    One thing I've spotted is located in your .trivlimp class. You spelt z-index as z-indec

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by Nanomech
    Can you post your HTML?

    One thing I've spotted is located in your .trivlimp class. You spelt z-index as z-indec

    Regards,

    NM.
    Fixed that, thank you. And this is the HTML I'm currently using for the tables.

    Code:
    <center>
    <table class="trivlimp">
    <tr>
    <td>
        
            <center>
    	<!-- |avatar| -->
    	<div class="lyrics"><!-- |field_1| --></div>
    	</center>
        
    </td>
    </tr>
    </table>
    <table class="imp">
    <tr>
    <td>
            <div class="trgls"><!-- |points| --> Gallons</div>
    
            <div class="trals"><!-- |field_2| --></div>
    
            <div class="trpc"><!-- |posts| --> posts</div>
    
            <div class="trttr"><!-- |field_3| --></div>
    
    </td>
    </tr>
    </table>
    </center>

IMN logo majestic logo threadwatch logo seochat tools logo