CODEWITHSUNDEEP
imagetextonclick
Rob
Rob

Reputation: 153

Replace Image with Text on Click

So, basically what I'm looking for is a script that when someone clicks on an image, it gets replaced with text that also includes some hyperlinks. I don't really care if it visually slides in, or gets instantly replaced, just as long as when the text comes up, there's a CLOSE option, that returns to the image.

Is there a jQuery or Javascript option for this that I just can't seem to find?

Thanks in advance to anyone who helps me out here. :)

Upvotes: 2

Views: 938

Answers (1)

Sam Becker
Sam Becker

Reputation: 19636

You can use pure CSS to achieve the effect you are talking about. Here is a a demo of the below code with a bit of styling added.

.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>

  <img width="100" height="100" src="http://www.google.com.au/images/srpr/logo3w.png">
</div>

Upvotes: 2

Related Questions