枠線＋テキスト | 動くWebデザインアイディア帳

画像リンクの動き
-枠線＋テキスト-

デモページを見る

See the Pen 7-23 枠線＋テキスト by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

マスクの疑似要素before、afterそれぞれに線を指定してhoverをしたら0.3秒かけて透過0→線が伸びる。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。

HTMLの書き方

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

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

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

<div class="lineText"><a href="#"><span class="mask"><img src="img/02.jpg" alt=""><span class="cap">枠線＋テキストが出現 LineText</span></span></a></div>

自作のCSS内の書き方

/*　枠線＋テキストが出現 　*/

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

/*線の設定*/
.lineText span.mask{
	position: relative;
	display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
}

.lineText span.mask::before,
.lineText span.mask::after{
    position: absolute;
    top: 4%;
    right: 2.5%;
    bottom: 4%;
    left: 2.5%;
    z-index: 3;
    content:"";
    opacity: 0;
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.lineText span.mask::before {
    border-top: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    border-bottom: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    transform: scale(0,1);
}

.lineText span.mask::after{
    border-right: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    border-left: 1px solid #fff;/*枠線の色と太さを変更したい場合はこの数値を変更*/
    transform: scale(1,0);
}

.lineText:hover span.mask::before,
.lineText:hover span.mask::after{/*hoverした時の変化*/
	opacity: 1;
    transform: scale(1);
}

/*中央テキスト*/
.lineText 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にする*/
}

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