Hej.
Jeg sidder lige og bikser med mit portfolio website og jeg vil gerne have en hover-effekt a la det jeg har lavet her (før musen over de store links).
http://www.kasperpyndt.dk/Problemet er bare.
1) At teksten forsinder når man fører musen over den.
2) At billeder rykker ned så det forholder sig til den linje du holder musen over.
Jeg vil gerne have det sådan, at rollover billederne holder samme position hele vejen igennem og at teksten ikke forsinder når man kører musen over den.
Min html kode ser sådan ud:
<div id="projectlist">
<a class="roll" href="">Dynamic Drive<span><img src="files/web_spread1.jpg" /></span></a><br/>
<a class="roll" href="">Arkiteker uden Grænser<span><img src="files/web_spread2.jpg" /></span></a><br/>
<a class="roll" href="">Zoka Coffee<span><img src="files/web_spread3.jpg" /></span></a><br/>
<a class="roll" href="">Various Posters<span><img src="files/web_spread4.jpg" /></span></a><br/>
<a class="roll" href="">Christmas is<span><img src="files/web_spread1.jpg" /></span></a><br/>
<a class="roll" href="">Pins and Threads<span><img src="files/web_spread2.jpg" /></span></a><br/>
<a class="roll" href="">Drawings 2010<span><img src="files/web_spread3.jpg" /></span></a><br/>
<a class="roll" href="">Television Contest<span><img src="files/web_spread4.jpg" /></span></a><br/>
<a class="roll" href="">Zoka Coffee<span><img src="files/web_spread2.jpg" /></span></a><br/>
</div>Og css'en ser sådan ud:
.roll {
position: absolute;
z-index: 50;
}
.roll:hover{
background-color: transparent;
color:black;
z-index: 0;
}
.roll span {
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
z-index: 0;
}
.roll span img {
border-width: 0;
position: absolute;
z-index: 0;
}
.roll:hover span {
visibility: visible;
position: absolute;
z-index: 0;
top: 0px;
left: 0px;
}Til sidst skal det lige siges, at jeg endnu ikke er den skarpeste koder, så I må gerne være lidt pædagogiske, hvis I kan forklare, hvad jeg skal gøre
Indlæg senest redigeret d. 21.09.2010 11:56 af Bruger #16142