NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

四角い画像をCSSで円状にトリミングしてマウスオーバー時にトリミングしたままズームする

2014年7月29日CSSテクニック

四角い画像をCSSで円状にトリミングしてマウスオーバー時にトリミングしたままズームする

四角い画像をCSSで円状にトリミングしつつ、マウスオーバー時はトリミングした円の大きさを変えずに中の画像だけズームさせます。(※Safari未対応/バージョン6.0.1現在)

デモページ

HTML

<div id="thumbnail">
	<a href="#">
		<div id="circle">
			<img src="img.jpg" width="300" height="300">
		</div>
	</a>
</div>

CSS

#thumbnail {
	width: 300px;
	margin: 0 auto;
}
#circle {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#circle img {
	transition: .3s ease-in-put;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	position: relative;
	z-index: 0;
}
a:hover #circle img {
	transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 四角い画像をCSSで円状にトリミングしてマウスオーバー時にトリミングしたままズームする

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com