[opgelost] CSS: afbeelding krijgt een kleur er om heen als muis er op wordt gehouden
Ik kan wel css ik snap het, maar ik doe het bijna nooit zelf dus raak mijn termen kwijt, mijn zoek termen(ik dacht dat het iets was als hover).
dus wat voor soort code heb ik nodig om dit te maken:
Alvast bedankt
Gewijzigd op 06/01/2013 18:49:45 door Keizer Webdesign
dus eerst niks en dan een kleur om het plaatje
Gewijzigd op 05/01/2013 23:35:31 door Keizer Webdesign
RobertJan, wat jij wilt is een border om het plaatje bij hover. Dat is precies wat mijn zoekopdracht zoekt. Heb je uberhaupt wel gekeken naar mijn link en de linkjes op die link? De eerste pagina staat helemaal vol met site's die dit probleem oplossen, de volgende 4.460.000 resultaten ook.
Gewijzigd op 05/01/2013 23:46:58 door Wouter J
ik heb bijv een transparant plaatje en daarom heen wil ik gwn een achtergrond kleur als je je muis er op houdt. dus wel een border maar dun super dik
Gewijzigd op 06/01/2013 01:03:42 door Tim S
http://www.w3schools.com/css/css_image_sprites.asp
die site vertelt mij alleen hoe je de sprites zelf kan veranderen, niet de transparante achtergrond.
Gewijzigd op 06/01/2013 13:53:46 door Keizer Webdesign
In je html:
<div class="plaatje_container"><img src="plaatje.png"></div>
In je css:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.plaatje_container {
padding: 20px;
}
.plaatje_container:hover {
background-color: red;
}
padding: 20px;
}
.plaatje_container:hover {
background-color: red;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<img src="plaatje.jpg">
img
{
padding: 20px; /* hoe dik wil je de rand? */
border: 1px solid #444;
border-radius: 5px;
}
img:hover
{
background-color: #222;
}
img
{
padding: 20px; /* hoe dik wil je de rand? */
border: 1px solid #444;
border-radius: 5px;
}
img:hover
{
background-color: #222;
}
Zo kan je heel wat moois maken.
Voorbeeld: www.zunflappie.nl/foto/
Gewijzigd op 06/01/2013 14:38:25 door Eddy E
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<img src="..." class="img--hover-bg">
/*img*/.img--hover-bg{
padding:20px;
}
.img--hover-bg:hover{
background:#222;
}
/*img*/.img--hover-bg{
padding:20px;
}
.img--hover-bg:hover{
background:#222;
}
Gewijzigd op 06/01/2013 15:12:57 door Wouter J
/* img */.img--hover-bg{
Dit is gewoon een comment waardoor je kan zien welk element deze klasse hoort te krijgen, voor flexibiliteit kun je dit niet qualfied vastleggen, maar je kan wel aangeven dat het hoort op een image element.
img.img--hover-bg {
Nu werkt de class uitsluitend op het img element. Op andere elementen zal het geen effect hebben.