CSS

HTMLの書き方

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

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

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

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

CCSの書き方

/*　キラッ　*/
.shine span.mask{
	position: relative;/*キラッの基点となる位置を定義*/
	display: block;
	line-height: 0;/*行の高さを0にする*/
	overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.shine span.mask::before {
	position: absolute;
	content:"";
	width: 50%;/*キラッの横幅*/
	height: 100%;/*キラッの縦幅*/
	top: 0;/*.shine span.maskのトップ0を基点*/
	left: -75%;/*画面の見えていない左から右へ移動するスタート地点*/
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);/*背景白透過を斜めに*/
}

.shine span.mask:hover::before {/*hoverした時の変化*/
	animation: shine 0.7s;/*アニメーションの名前と速度を定義*/
}

@keyframes shine {
	100% {
		left: 125%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

HTMLの書き方

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

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

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

<div class="sepia"><a href="#"><img src="img/07.jpg" alt=""></a></div>

CSSの書き方

/*　セピアからカラーへ　*/
.sepia img{
	filter: sepia(100%);/*セピア具合を変更したい場合はこの数値を変更*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.sepia a:hover img{/*hoverした時の変化*/
	filter:sepia(0);
}

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

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

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

<div class="grayscale"><a href="#"><img src="img/06.jpg" alt=""></a></div>

CSSの書き方

/*　モノクロからカラーへ　*/

.grayscale img{
	filter: grayscale(100%);/*モノクロ具合を変更したい場合はこの数値を変更*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.grayscale a:hover img{/*hoverした時の変化*/
	filter:grayscale(0);
}

HTMLの書き方

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

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

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

<div class="opacity"><a href="#"><img src="img/05.jpg" alt=""></a></div>

CSSの書き方

/*　透過　*/
.opacity img{
	opacity:1;
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.opacity a:hover img{/*hoverした時の変化*/
	opacity:0.8;/*透過具合を変更したい場合はこの数値を変更*/
}

HTMLの書き方

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

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

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

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

CSSの書き方

/*　ぼかす　*/
.blur img{
	filter: blur(0);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.blur a:hover img{/*hoverした時の変化*/
	filter: blur(3px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}


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