HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-23.css">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;
}
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;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-21.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="zoomOutText">
<a href="#"><span class="mask"><img src="img/07.jpg" alt=""><span class="cap">画像縮小（ぼかし）＋テキストが出現 ZoomOutText</span></span></a>
</div>
CSSの書き方
/* 画像の縮小＋テキスト出現 */
.zoomOutText{/*背景色とテキストの基点となる位置を定義*/
position: relative;
}
.zoomOutText span.mask{
position: relative;
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
display: block;/*画像をくくるspanタグをブロック要素にする*/
line-height: 0;/*行の高さを0にする*/
overflow:hidden;/*拡大してはみ出る要素を隠す*/
}
.zoomOutText:hover span.mask::before{/*hoverした時の変化*/
content:"";
position: absolute;
z-index:2;
top:10px;
left:10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background:rgba(0,0,0,0.5);/*背景色*/
}
.zoomOutText img{
transform: scale(1.2);
filter: blur(0);
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
.zoomOutText:hover img{/*hoverした時の変化*/
transform: scale(1);/*縮小の値を変更したい場合はこの数値を変更*/
filter: blur(2px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}
.zoomOutText 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にする*/
}
.zoomOutText:hover span.cap{/*hoverした時の変化*/
opacity:1;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-20.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="zoomInText">
<a href="#"><span class="mask"><img src="img/06.jpg" alt=""><span class="cap">画像拡大（ぼかし）＋テキストが出現 ZoomInText</span></span></a>
</div>
CSSの書き方
/* 画像の拡大＋テキスト出現 */
.zoomInText{/*テキストの基点となる位置を定義*/
position: relative;
}
.zoomInText span.mask{
position: relative;
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
display: block;/*画像をくくるspanタグをブロック要素にする*/
line-height: 0;/*行の高さを0にする*/
overflow:hidden;/*拡大してはみ出る要素を隠す*/
}
.zoomInText:hover span.mask::before{/*hoverした時の変化*/
content:"";
position: absolute;
z-index:2;
top:10px;
left:10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background:rgba(0,0,0,0.5);/*背景色*/
}
.zoomInText img{
transform: scale(1);
filter: blur(0);
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
.zoomInText:hover img{/*hoverした時の変化*/
transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
filter: blur(2px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}
.zoomInText 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にする*/
}
.zoomInText:hover span.cap{/*hoverした時の変化*/
opacity:1;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-19.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="flipZ2">
<a href="#"><img src="img/05.jpg" alt=""><span class="cap">回転Z軸2＋テキストが出現 flipZ2</span></a>
</div>
CSSの書き方
/* 回転Z軸2----------------------------- */
.flipZ2 a{/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipZ2 img {
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}
.flipZ2 a:hover img {/*hoverした時の変化*/
transform: rotate3d(-1, -1, 0, 100deg);/*奥行きをもたせて回転*/
opacity: 0;
}
.flipZ2 span.cap {
/*ここからエリアの絶対配置の指定*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: rotate3d(1, 1, 0, 100deg);/*奥行きをもたせて回転*/
opacity: 0;
background:#333;/*背景色*/
color: #fff;/*テキストの色を変えたい場合はここを修正*/
/*ここからテキスト中央寄せの指定*/
display: flex;
justify-content: center;
align-items: center;
/*ここまでテキスト中央寄せの指定*/
}
.flipZ2 a:hover span.cap {/*hoverした時の変化*/
transform: rotate3d(0, 0, 0, 0deg);/*奥行きをもたせて回転*/
opacity: 1;
transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}