Ondersteuning » Thema en CSS/opmaak » Tekst over afbeelding wanneer je erover scrollt; hoe?

  • Ha iedereen,

    Momenteel bezig met een website, thema: Tonic. Ik zoek een manier om de tekst die reeds onder de afbeeldingen staat bij de widgets (zie: http://www.lennardfopma.nl) ín de afbeeldingen te krijgen. Wel zover dat ik de transparantie heb kunnen aanpassen, nu de tekst er nog in haha. Iemand tips? Welke code heb ik daarvoor nodig? M.b.t. de widgets is dit wat er reeds aan codes staat:

    @media (max-width: 768px) {
    #home-page-widgets {
    margin: 0;
    }
    }

    .home-widget {
    margin: 20px 0;
    text-align: center;

    }
    @media (max-width: 768px) {
    .home-widget {
    margin-bottom: 10px !important;
    }
    }
    .home-widget img {
    margin-top: 0;
    }

    Iemand tips? Hoor het graag!

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Wil je de tekst die onder de rondjes staat in de rondjes hebben?

    Zo ja, dan moet je deze code toevoegen onderaan je style.css bestand:

    .basic h3 {
    margin-top: -250px;
    }

    Als dit niet is wat je wilt, zou je het dan kunnen verduidelijken met screenshots / tekening?

    Groet,
    Thijs

    • Deze reactie is gewijzigd 1 jaar, 4 maanden geleden door Richard van Denderen. Reden: handtekening verwijderd
    Thread starter Elke1987

    (@elke1987)

    Ha Thijs!

    Komt in de buurt, maar het wordt heel lelijk, omdat de tekst niet volledig erin past en de andere widget (met de tags) ook naar boven komt en over het meest rechter plaatje valt. Qua voorbeeld: http://www.nsmbl.nl/ (halloooo vrouwensite), hier zie je bijvoorbeeld bij een stukje over Blake Lively dat dra je erover scrollt, de achtergrond donker wordt en er een tekst op verschijnt. Zoiets bedoel ik.

    Ook het volgende (misschien weet jij dit?), ik heb nu een code ingevoegd zodat de widgets eerst transparant zijn en wanneer je erover scrollt in vol ornaat verschijnen. M’n doel is om dat enkel op de home-pagina te hebben, maar op de één of andere manier doet ‘ie dat op alle afbeeldingen (op andere pagina’s).

    Het betreft de volgende code:
    img {
    opacity:0.3;
    filter:alpha(opacity=40);
    }
    img:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
    }

    Heb ‘m toegevoegd bij de home-widget-img (en ook geprobeerde de code te wijzigen als home-widget-img, maar dan doet ‘ie het niet). Enig idee wat ik dan dien aan te passen..?

    Groet, Elke

    Hi Elke,

    Denk niet dat dit erg mooi wordt. Waarom gebruik je niet een thema dat deze functie heeft? Lijkt me veel gemakkelijker en daardoor blijft het thema responsive voor mobiele weergave.

    Groet,
    Thijs

    • Deze reactie is gewijzigd 1 jaar, 4 maanden geleden door Richard van Denderen. Reden: handtekening verwijderd
3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Tekst over afbeelding wanneer je erover scrollt; hoe?’ is gesloten voor nieuwe reacties.