マウスオーバーで「リンク画像」拡大表示をCSSで実装

Intense Image

リンク対応方法が不明なため、利用断念
・最新リビジョン「Aug 1, 2014」を試すも、結果は同じ
・クリックで全画面表示
・テキスト表示は「data-title=""」や「data-caption=""」で指定するので、リンクは多分張れないと思う(未検証)

---

GifLinks

・リンク要素として画像指定しているので、遷移はしない
・「全画面拡大表示された画像」をクリックすると、元の表示へ戻るだけ

CSS

img要素のtransitionに★★sと指定
・「変化する時間の長さ」を5.5秒に指定

.targetClass img {

    transition: all 5.5s ease-in-out;

}

img:hover要素にtransform: scale(数値);を指定
・scale()内の数値で拡大・縮小を設定

.targetClass:hover img{

    transform:scale(5.2);

}

※IE8以下は非対応

：hover指定

下記の違いを要調査

.targetClass:hover img{

}

.targetClass img:hover {

}

---

拡大位置

端の画像を拡大すると、途切れてしまう
・配置設定を振り分け