Vervang afbeelding met tekst bij klik

Dus wat ik eigenlijk zoek is een script dat wanneer iemand op een afbeelding klikt, deze wordt vervangen door tekst die ook enkele hyperlinks bevat. Het maakt mij niet echt uit of het visueel naar binnen glijdt of direct wordt vervangen, net zo lang als wanneer de tekst verschijnt, is er een optie DICHT, die terugkeert naar de afbeelding.

Is er een jQuery- of Javascript-optie die ik gewoon niet kan vinden?

Bij voorbaat dank aan iedereen die me hier helpt. :)

2
Op basis van uw opmerking wilt u een verborgen, transparante div over de bovenkant van een afbeelding kunnen laten zien wanneer een gebruiker erover zweeft.
toegevoegd de auteur Sam152, de bron
Ik heb mijn bericht bijgewerkt.
toegevoegd de auteur Sam152, de bron
Hoe zou dat worden bereikt?
toegevoegd de auteur Rob, de bron

1 antwoord

Je kunt pure CSS gebruiken om het effect te bereiken waar je het over hebt. Hier is een een demo van de onderstaande code met een beetje styling toegevoegd.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.outer {
  position: relative;
  width: 100px;
  height: 100px;
}

.inner-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  display: none;
  background-color: red;
  opacity: 0.5;
}

.outer:hover .inner-text {
  display: block;
}
<div class="outer">
  <div class="inner-text">
    Here is some text
  </div>

  
</div>
</div> </div>

2
toegevoegd
Ik heb het effect gevonden waarnaar ik op zoek ben, ik weet gewoon niet hoe ik het opnieuw moet maken: dribbble.com Het enige dat telt, is dat ik meerdere links op mijn plaats heb, zodat elke gebruiker de mogelijkheid moet hebben om individueel te worden aangeklikt.
toegevoegd de auteur Rob, de bron
Heel erg bedankt! Werkt perfect! Ik wist niet dat je een uitspraak als ".outer: hover.whatever" zo zou kunnen.
toegevoegd de auteur Rob, de bron