×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

■ CSSコレクション

練習がてらCSSをいじっていきまする。
CSS3対応 IE以外動作予定

背景の変化

オンマウスで背景画像変わる奴。
経過変化はchromeのみ。素直にjavascript使えばいいのだけど笑
改良する予定。

こんにちは。


div#number02	{
	height:150px;
	background-image:url(css/PA067353.JPG);
	background-size:cover;
	transition-property:background-image;
	transition-duration:0.75s;
	-webkit-transition-property:background-image;
	-webkit-transition-duration:0.75s;
	-o-transition-property:background-image;
	-o-transition-duration:0.75s;
	-moz-transition-property:background-image;
	-moz-transition-duration:0.75s;
				}
				
div#number02:hover	{
	height:150px;
	background-image:url(css/PA067362.JPG);
	background-size:cover;
				}
        

オンマウスで画像を拡大

ポインタを画像に乗せると拡大表示されるもの。
前作ったものよりかは活用しやすいかも。



img#number01	{
	width:20%;
	height:auto;
	-o-transition-property:height, width;
	-o-transition-duration:0.5s;
	-moz-transition-property:height, width;
	-moz-transition-duration:0.5s;
	-webkit-transition-property:height, width;
	-webkit-transition-duration:0.5s;
	border:1px dashed #ccc;
				}
				
img#number01:hover
			{
	width:75%;
			}