はじめに

近年よくみかける動きの１つです。マウスカーソルを重ねると画像部分が拡大するアニメーションになります(マウスカーソルを外せば元のサイズに戻る)。WordPressを使われているサイトの記事一覧ページでみることが多いと個人的には思っています。マウスカーソルがないスマホやタブレットでは意味がないのですが、それでもクライアントさまにパソコンでみせたときの評判はよいです。

サンプル

パソコンで閲覧し、マウスカーソルを下の画像に重ねてください。
本記事では用いませんが、実際に使う場合は、リンクタグを伴うことが多いと思われます。

サンプルのHTML

<div class="sample">
	<figure>
		<img src="/blog/wp-content/uploads/2024/03/thumbnail.jpg" alt="">
	</figure>
</div>

サンプルのCSS

	.sample
	{
		border:1px solid #ccc;
		box-sizing:border-box;
		height:240px;
		padding:10px;
		width:240px;
	}
	.sample figure
	{
		height:218px;
		margin:0;
		overflow:hidden;
		padding:0;
		width:100%;
	}
	.sample figure img
	{
		height:218px;
		object-fit:cover;
		object-position:center center;
		transform:scale(1);
		transition:all 1s ease-in-out;
		width:100%;
	}
	.sample figure img:hover
	{
		transform:scale(1.2);
	}

最後に

ホームページの新規制作・リニューアルは、神奈川県相模原市にあるオフィス木蓮までお気軽にご相談ください。お見積もりは無料です。セキュリティ対策を最優先とし、基本的ではあるものの高スコアなSEO対策、ユーザーの使い勝手などを考慮したサイトを提案します。他社が制作されたホームページのメンテナンスも対応しますのでお気軽にお問い合わせください。