Question

webPage

Question #1
When hovering over the ‘cars menu’ it will fade a bit to black. I did this with jQuery.

• Is it possible to do that same effect with CSS(3)?
• and is it possible to change the fading color(with or without jQuery)?

Question #2
When clicking the ‘cars menu’ You will get thumbnails of images of the cars en some information. When hovering over a thumbnail you’ll get to see the image in a bigger format. But only the first left upper image hovers good, but all the rest is cutted and its position is very off.

This is for me the biggest problem that I can’t seem to solve. I reviewed my CSS code a bit, everything looks fine for me. I have been experimenting a bit, but no success.

HTML Code

 <div class="car1">

                    <h1>Audi A6</h1>
                    <div class="specs">
                        <table>
                            <tr>
                                <td>Merk:</td>
                                <td>Audi </td>
                            </tr>
                            <tr>
                                <td>Model:</td>
                                <td>A6 avant</td>
                            </tr>
                            <tr>
                                <td>Bouwjaar:</td>
                                <td>2009</td>
                            </tr>
                            <tr>
                                <td>Uitvoering:</td>
                                <td>Diesel</td>
                            </tr>
                        </table>

                        <div>

                        </div>
                    </div>
                    <!-- ID patroon van Thumbnaal c(ars) X(hoeveelste wagen nummer) Y(hoeveelste thumbnail nummer)-->
                    <div class="pics">
                         <a class="thumbnail" href="#thumb"> 
                            <img class="thumb" src="Cars/audi/1.jpg" alt="Voorkant Audi A6" /> 
                            <span>
                                <img class="large" src="Cars/audi/1.jpg" alt="Voorkant Audi A6" />
                            </span>
                         </a>

                         <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/2.jpg" alt="Achterkant Audi A6"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/2.jpg" alt="Achterkant Audi A6" />
                        </span>
                        </a>

                         <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/3.jpg" alt="Rijdende Audi A6"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/3.jpg" alt="Voorkant Audi A6" />
                            </span>
                        </a>

                         <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd" />
                            </span>
                        </a>

                        <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/5.jpg" alt="Zijkant Audi A6"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/5.jpg" alt="Zijkant Audi A6" />
                            </span>
                        </a>

                        <!--  <img class="thumbnail" src="Cars/audi/2.jpg" alt="Achterkant Audi A6">
                            <img class="large" src="Cars/audi/2.jpg" alt="Achterkant Audi A6">
                          <img class="thumbnail" src="Cars/audi/3.jpg" alt="Rijdende Audi A6">
                            <img class="large" src="Cars/audi/3.jpg" alt="Rijdende Audi A6">
                          <img class="thumbnail" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd">
                            <img class="large" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd">
                          <img class="thumbnail" src="Cars/audi/5.jpg" alt="Zijkant Audi A6">
                            <img class="large" src="Cars/audi/5.jpg" alt="Zijkant Audi A6">-->

                    </div>

        </div>

CSS code

.thumbnail{
    /*width:10em;   
    height:7em;
    margin:1%;*/
    z-index:0;
    position:relative;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility:hidden;
overflow:visible;
text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
overflow:visible;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility:visible;
top: 100%;
left:1%; /*position where enlarged image should offset horizontally */
overflow:visible;

}

.large{
    width: 45em;    
}

.thumb{

    width:40%;
}

.thumb:hover{
    border:1px white solid; 
}

If something is still needed please ask me, I will provide the information needed.

Answer 1

1) yes, use css3 transistions (http://css3.bradshawenterprises.com/transitions/) and the opacity property

.car{
   -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.car:hover{
   opacity:0.7;
}