Заменить изображение текстом на клике

Question

Итак, в основном я ищу скрипт, который, когда кто-то нажимает на изображение, заменяется текстом, который также содержит некоторые гиперссылки. Мне все равно, будет ли он визуально вставляться или мгновенно заменяться, до тех пор, пока появляется текст, есть опция ЗАКРЫТЬ, которая возвращает изображение.

Есть ли для этого опция jQuery или Javascript, которую я просто не могу найти?

Заранее спасибо всем, кто помогает мне здесь. :)

Answer 1

Вы можете использовать чистый CSS для достижения эффекта, о котором вы говорите. Вот демонстрация приведенного ниже кода с добавлением немного стиля.

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