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;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-18.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="flipZ1">
<a href="#"><img src="img/04.jpg" alt=""><span class="cap">回転Z軸1＋テキストが出現 flipZ1</span></a>
</div>
CSSの書き方
/* 回転Z軸1----------------------------- */
.flipZ1 a{/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipZ1 img {
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}
.flipZ1 a:hover img {/*hoverした時の変化*/
transform: rotate3d(-1, 1, 0, 100deg);/*奥行きをもたせて回転*/
opacity: 0;
}
.flipZ1 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;
/*ここまでテキスト中央寄せの指定*/
}
.flipZ1 a:hover span.cap {/*hoverした時の変化*/
transform: rotate3d(0, 0, 0, 0deg);/*奥行きをもたせて回転*/
opacity: 1;
transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-17.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="flipY">
<a href="#"><img src="img/03.jpg" alt=""><span class="cap">回転Y軸＋テキストが出現 flipY</span></a>
</div>
CSSの書き方
/* 回転Y軸----------------------------- */
.flipY a{/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipY img {
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}
.flipY a:hover img {/*hoverした時の変化*/
transform: rotateY(-180deg);
opacity: 0;
}
.flipY span.cap {
/*ここからエリアの絶対配置の指定*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: rotateY(90deg);/*横軸に回転*/
transform-origin: 50% 0%;/*回転する基点*/
opacity: 0;
background:#333;/*背景色*/
color: #fff;/*テキストの色を変えたい場合はここを修正*/
/*ここからテキスト中央寄せの指定*/
display: flex;
justify-content: center;
align-items: center;
/*ここまでテキスト中央寄せの指定*/
}
.flipY a:hover span.cap {/*hoverした時の変化*/
transform: rotateY(0);/*横軸に回転*/
opacity: 1;
transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}