画像をクリックして画像に置き換えます

Question

基本的に私が探しているのは、画像をクリックしたときにハイパーリンクを含むテキストに置き換えられるスクリプトです。私はそれが視覚的にスライドするかどうか気にしません、またはテキストが現れる限り、すぐに置き換えられます。CLOSEオプションがあり、イメージに戻ります。

jQueryまたはJavascriptのオプションはありますか？見つからないようですか？

ここで私を助けてくれる人には、事前に感謝します。 :)

Answer 1

純粋なCSSを使用して、あなたが話している効果を達成できます。 Here is a a demoのコードの下に少しのスタイリングが追加されました。

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