5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Q:
    Geblokkeerd
    Anoniem

    Probleem al opgelost! Probleempje met shadow-inset & img:hover

    Goeiemorgen allen!

    Ik ben een beetje aan het knutselen met een site waarbij ik tegen een probleempje aanloop. Had er al meer, maar daar heb ik gelukkig goeie hulp bij gehad om dat op te lossen:)

    Het gaat om deze pagina:
    http://joramoudenaarde.com/html3/

    En om precies te zijn dit stukje html:

    <br />
    <article class="portfolio"><br />
        <a href="#" title="projectname"><br />
            <img src="https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=img/test.&ext=png&h=087efebd44fe05872473084cf684a3ff&t=1582623314" alt="thumbnail" /><br />
            <h3>Title</h3><br />
            <p>description</p><br />
        </a><br />
    </article><br />
     

    En om precies te zijn dit stukje css:

    <br />
    .portfolio a {<br />
      text-decoration: none;<br />
      color: #363636;<br />
      }</p>
    <p>.portfolio a:hover {<br />
      color: #000;<br />
      }</p>
    <p>.portfolio a img {<br />
      box-shadow: inset 0 0 0 3px #f47920;<br />
      box-shadow: inset 0 0 0 3px rgba(244, 121, 32, 0.7);<br />
      }</p>
    <p>.portfolio a:hover img:hover {<br />
      box-shadow: inset 0 0 0 10px #f0a900;<br />
      box-shadow: inset 0 0 0 10px rgba(240, 169, 0, 0.7);<br />
      }<br />
     

    De border die je op die pagina om de ronde afbeeldingen ziet is een box-shadow:inset. Ik probeer deze óp de afbeelding te krijgen met een rgba kleur om een hover-effect aan te hangen. Uiteindelijk wil ik namelijk zowel “TITLE” als “description” als de box-shadow tegelijkertijd een hover te geven als je over een project heen gaat met je muis. (de tekst wodt nu namelijk zwart bij een hover)

    Nu ben ik zoals je kunt zien al een heel eind, maar om de één of andere reden krijg ik ’t niet voor elkaar om óók nog eens een box-shadow óp die afbeelding te krijgen.

    Kan iemand me hier misschien mee helpen?:)

    Mvg,
    Joram

    p.s.: het lijkt erop dat de “code” tag hier in het forum niet goed om kan gaan met CSS-code:)

    Bijdrager
    Jakko Westerbeke

    Ik zal het weer maar eens zeggen: als je de

     

    -tag gebruikt, moet je lege regels voorkomen, omdat die vervangen worden door een zichtbare </p><p>. Waarom dit na een paar jaar nog altijd zo is, is me dan wel weer onduidelijk …

    Geblokkeerd
    Anoniem

    Tja, ik heb je posts over dat probleem nog niet eerder gezien:)
    Wel vreemd inderdaad, maar goed… je zou denken dat je met een witregel (normaal gesproken dan) je code een beetje overzichtelijker maakt voor de bezoekers hier, hehe.

    Mvg,
    Joram

    Bijdrager
    daanclasener

    Was het al gelukt?

    Geblokkeerd
    Anoniem

    Jazeker! Met behulp van Shmoo was het na een hoop gevecht met de code gelukt:)
    Check http://www.joramoudenaarde.com/html3 maar als je wilt weten wat het idee was… het is bij lange na nog niet af, maar de thumbnails doen eindelijk wat ze moeten doen.

    Mvg,
    Joram

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.