CSS

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-3.css">

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="zoomInRotate"><a href="#"><span class="mask"><img src="img/03.jpg" alt=""></span></a></div>

CSSの書き方

/*　画像拡大＋回転　*/
.zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.2);/*拡大、回転の値を変更したい場合はこの数値を変更*/
}


/*　画像のマスク　*/
.mask{
	display: block;
	line-height: 0;/*行の高さを0にする*/
	overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-2.css">

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="zoomOut"><a href="#"><span class="mask"><img src="img/02.jpg" alt=""></span></a></div>

CSSの書き方

/*　画像の縮小　*/
.zoomOut img{
	transform: scale(1.1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOut a:hover img{/*hoverした時の変化*/
	transform: scale(1);/*拡大の値を変更したい場合はこの数値を変更*/
}


/*　画像のマスク　*/
.mask{
	display: block;
	line-height: 0;/*行の高さを0にする*/
	overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-1.css">

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="zoomIn"><a href="#"><span class="mask"><img src="img/01.jpg" alt=""></span></a></div>

CSSの書き方

/*　画像の拡大　*/
.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/
.mask{
	display: block;
	line-height: 0;/*行の高さを0にする*/
	overflow: hidden;/*拡大してはみ出る要素を隠す*/
}