CSS

HTMLの書き方

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

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

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

<div class="opacityText">
	<a href="#"><span class="mask"><img src="img/01.jpg" alt=""><span class="cap">画像透過＋グラデーション＋テキストが出現 OpacityText</span></span></a>
</div>

CSSの書き方

/*　画像の透過+グラデーション＋テキスト出現　*/

.opacityText{/*テキストの基点となる位置を定義*/
	position: relative;
}

.opacityText span.mask{
	position: relative;/*グラデーションの基点となる位置を定義*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	display: block;/*画像をくくるspanタグをブロック要素にする*/
	line-height: 0;/*行の高さを0にする*/
}

.opacityText:hover span.mask::before{/*hoverした時の変化*/
	content:"";
	position: absolute;
	z-index:2;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg,rgba(88,182,211,.6),rgba(229,93,135,.6));/*背景色（グラデーション）*/
}

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

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

.opacityText span.cap{
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	position: absolute;
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
	line-height: 1.5;/*行の高さを1.5にする*/
}

.opacityText:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}