ユーザーが画像をホバーしたときに画像クレジットを表示する（画像を拡大してクレジットを表示する）Google画像エンジン効果を作成しようとしています。画像をポップアップしてコンテンツの流れを無視する方法がわかりません。
ライトボックスが同様の効果を発揮することは知っていますが、必要なのは単純なホバーと画像クレジット効果の表示だけです。私は検索グーグルを持っています、そして私が得たのはライトボックスのようなポップアッププラグインだけです。誰かが私にそのための指示やチュートリアルを教えてくれるかどうか疑問に思っていましたか？どうもありがとう。
これにより、画像のdivコンテナの上にdivが浮かんでいることがわかります。
<div id="yourImage1Parent"><img id"yourImage1" src="yourImage1src.jpg" /></div>
<script type="javascript/text">
var credits = document.createElement("div");
credits.style = "position: absolute; height:25px; width: 25px";
credits.innerHTML = //load credits from ajax or array or logic, maybe from data-attribute
document.getElementById("yourImage1Parent").appendChild(credits);
</script>
ただし、それは単純です。この要素の表示と要素の削除を制御するために、イベントを接続する必要があります。例として実際のコードがなかったため、このコードは単なる例です。
画像を拡大してボックスを表示する基本的な例を作成しました。これを一般的な解決策にするには、より細かいjavascriptが必要です。
同じ画像のimg要素を含む非表示のdivを作成します。元のimg要素のonmouseoverイベントで、タイマーを開始します。タイマーは、重複したimg要素を持つdivを表示します。divが表示されると、別のタイマーが開始されます。タイマーが作動したら、divのサイズと位置、およびdiv内の画像のサイズを変更します。CSS3 Transistionsを使用すると、ブラウザは自動的にサイズをズームのようなアニメーションに変更します。
Chromeでコードをテストしましたが、FirefoxとOperaでも機能するはずです。IEはアニメーションを表示しません。
リンク：ここ
出発点として私のソースを使用してください。
編集：クラスの親指を持つすべての画像を取得してズームする、より良いバージョンのコードを作成しました。このバージョンは、古いバージョンよりも少し複雑です。繰り返しになりますが、ソースを見て、以下の解説で気軽に質問してください。
リンク：ここ