Advanced Search

Return to Snippet

Revision: 29502
at July 30, 2010 18:00 by gabbo
Initial Code 
.foto-link
{
width: 290px;
height: 190px;
display: block;
margin: 0 auto;
}

.foto1
{
background: url(tor.jpg) no-repeat;
}

.foto-link:hover
{
background-position: 0 -190px;
}

/* HMTL Snippet 

<a href="#" class="foto-link foto1"></a> 

*/
Initial URL 
http://www.ohne-css.gehts-gar.net/0026.php
Initial Description 
Standardgrafik und Austauschgrafik befinden sich in einer Datei. Es wird aber nur 50% angezeigt. Beim Hover wird lediglich mit background-position verschoben.
Vorteil: Keine Ladeverzögerung für die Hovergrafik.
Initial Title 
Grafik mit Hovereffekt verschieben statt austauschen
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS