Nederlands Ondersteuningsforum :
Wilt u reageren op dit bericht? Maak met een paar klikken een account aan of log in om door te gaan.

Widget afbeeldingen naast elkaar plaatsen

3 plaatsers

Vorige onderwerp Volgende onderwerp Ga naar beneden

Opgeloste Topic Widget afbeeldingen naast elkaar plaatsen

Bericht van Lily1901 za 30 mei 2015 - 22:26

Forumversie : phpBB2
Functie op het forum : Administrator
Betreffende webbrowser(s) : Chrome

Ik wil graag hoover afbeeldingen naast elkaar plaatsen op een forum widget.
Alleen weet ik niet welke code ik moet gebruiken. De afbeeldingen zijn 100px breed en de breedte van forum widgets staan ingesteld op 230px


Laatst aangepast door Lily1901 op zo 31 mei 2015 - 13:16; in totaal 1 keer bewerkt

Terug naar boven Terug naar beneden

Lily1901

Lily1901
Nieuw Forumlid

Vrouw
Berichten : 10
Leeftijd : 28
Registratie : 29-05-15
Oprichter : Nee
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://themazerunnernl.actieforum.com/



Lily1901 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Widget afbeeldingen naast elkaar plaatsen

Bericht van 10spetter10 za 30 mei 2015 - 23:09

Ik heb snel iets in elkaar gestoken maar het is wel heel basis. Je moet gewoon heel de code kopiëren en plakken in een zelfgemaakte widget.

Code:
<style>.img_cont {position: relative; overflow: hidden; float: left; width: 100px; height: 100px; margin: 1px;} .img_cont .hover {position: relative; display: table-cell; top: -100px; width: 100px; height: 100px; vertical-align: middle; text-align: center; transition: 0.5s; opacity: 0;} .img_cont:hover .hover {opacity: 1.0;}</style>
<div class="img_cont">
   <img src="http://i.imgur.com/c0k0zvA.jpg?1" />       
   <div class="hover">
      tekst     
   </div>
</div>
<div class="img_cont">
   <img src="http://i.imgur.com/c0k0zvA.jpg?1" />         
   <div class="hover">
      tekst     
   </div>
</div>
<div class="img_cont">
   <img src="http://i.imgur.com/c0k0zvA.jpg?1" />         
   <div class="hover">
      tekst     
   </div>
</div>

Als je wat kennis van css hebt kan je eventueel de opmaak zelf aanpassen anders moet je eens een uitgebreide beschrijving maken over hoe het er precies moet uitzien.
bv: wanneer je met je muis over de afbeelding gaat schuift er een halfdoorzichtige witte blok voor met een groene vette tekst.

Terug naar boven Terug naar beneden

10spetter10

10spetter10
Superactief Forumlid

Man
Berichten : 1222
Leeftijd : 26
Registratie : 08-07-12
Oprichter : Ja
Templates : Ja
CSS : Ja

Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Oud Actieforum Medewerker
Deze gebruiker is een oud Actieforum medewerker.
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!




10spetter10 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Widget afbeeldingen naast elkaar plaatsen

Bericht van Lily1901 za 30 mei 2015 - 23:25

thanksies <3

Terug naar boven Terug naar beneden

Lily1901

Lily1901
Nieuw Forumlid

Vrouw
Berichten : 10
Leeftijd : 28
Registratie : 29-05-15
Oprichter : Nee
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://themazerunnernl.actieforum.com/



Lily1901 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Widget afbeeldingen naast elkaar plaatsen

Bericht van Liesbeth* zo 31 mei 2015 - 8:25

.Widget afbeeldingen naast elkaar plaatsen Ho2aok11.Als uw ondersteuningsvraag opgelost is, gelieve dan het topic als opgelost met het Widget afbeeldingen naast elkaar plaatsen Opgelo10 icoon te markeren! Hoe doe ik dit? Klik Hier


Widget afbeeldingen naast elkaar plaatsen 121910
Forum Tools | Tutorials | Stijl aanvraag | Forumpromotie goedkeuring | Wachtwoord vergeten?
Geen ondersteuning via PM | Ondersteuningsvraag opgelost? Markeer je topic dan met het icoon Widget afbeeldingen naast elkaar plaatsen 210610



Widget afbeeldingen naast elkaar plaatsen PiUYHC2 Facebook | Widget afbeeldingen naast elkaar plaatsen X10 X (Twitter)

Terug naar boven Terug naar beneden

Liesbeth*

Liesbeth*
Globaal Moderator
Globaal Moderator

Vrouw
Berichten : 1712
Leeftijd : 69
Registratie : 13-06-13
Oprichter : Ja
Templates : Ja
CSS : Ja

500 berichten of meer zijn als leuk gemarkeerd
Wanneer je 500 of meer likes op je berichten krijgt
Medewerker award
Je verdient deze award als je medewerker bent van Actieforum
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

https://pspparadise.actieforum.com/forum https://pspsensation.actieforum.com/forum



Liesbeth* is bedankt door de starter van dit topic.

Opgeloste Topic Re: Widget afbeeldingen naast elkaar plaatsen

Bericht van Lily1901 zo 31 mei 2015 - 11:46

- opgelost


Laatst aangepast door Lily1901 op zo 31 mei 2015 - 13:16; in totaal 1 keer bewerkt (Reden : zelf opgelost)

Terug naar boven Terug naar beneden

Lily1901

Lily1901
Nieuw Forumlid

Vrouw
Berichten : 10
Leeftijd : 28
Registratie : 29-05-15
Oprichter : Nee
Templates : Ja
CSS : Ja

Lid sinds +5 jaar
U bent al meer dan 5 jaar lid
200 berichten of meer gepost
Je hebt 200 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

http://themazerunnernl.actieforum.com/



Lily1901 is bedankt door de starter van dit topic.

Opgeloste Topic Re: Widget afbeeldingen naast elkaar plaatsen

Bericht van Liesbeth* zo 31 mei 2015 - 14:09

.Widget afbeeldingen naast elkaar plaatsen Hurhad10.Ondersteunings Vraag opgelost en gesloten.


Widget afbeeldingen naast elkaar plaatsen 121910
Forum Tools | Tutorials | Stijl aanvraag | Forumpromotie goedkeuring | Wachtwoord vergeten?
Geen ondersteuning via PM | Ondersteuningsvraag opgelost? Markeer je topic dan met het icoon Widget afbeeldingen naast elkaar plaatsen 210610



Widget afbeeldingen naast elkaar plaatsen PiUYHC2 Facebook | Widget afbeeldingen naast elkaar plaatsen X10 X (Twitter)

Terug naar boven Terug naar beneden

Liesbeth*

Liesbeth*
Globaal Moderator
Globaal Moderator

Vrouw
Berichten : 1712
Leeftijd : 69
Registratie : 13-06-13
Oprichter : Ja
Templates : Ja
CSS : Ja

500 berichten of meer zijn als leuk gemarkeerd
Wanneer je 500 of meer likes op je berichten krijgt
Medewerker award
Je verdient deze award als je medewerker bent van Actieforum
1000 berichten of meer gepost
Je hebt 1000 berichten of meer gepost
Feestdagen 2022
Fijne Feestdagen namens team Actieforum!
Lid sinds +10 jaar
U bent al meer dan 10 jaar lid
Feestdagen 2023
Fijne Feestdagen namens team Actieforum!

https://pspparadise.actieforum.com/forum https://pspsensation.actieforum.com/forum



Liesbeth* is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven

- Soortgelijke onderwerpen

Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum