HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-11.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="bgUD"><a href="#"><span class="mask"><img src="img/04.jpg" alt=""><span class="cap">背景が上から出現＋テキスト bgUD</span></span></a></div>
CSSの書き方
/* 背景が上から出現＋テキスト */
.bgUD{
position:relative;/*テキストの基点となる位置を定義*/
}
.bgUD span.mask{
position:relative;/*背景色の基点となる位置を定義*/
display: block;
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
.bgUD span.mask::before{
content:"";
position: absolute;
z-index: 2;
left:0;
top:0;
opacity:0;
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: translateY(-100%);
background:#333;/*背景色*/
width:100%;
height: 100%;
}
.bgUD:hover span.mask::before{/*hoverした時の変化*/
opacity:1;
transform: translateY(0);
}
.bgUD span.cap{
position: absolute;
opacity:0;
transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
z-index:3;/*テキストを前面に出す*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;/*テキストの色を変えたい場合はここを修正*/
line-height: 1.5;/*行の高さを1.5にする*/
}
.bgUD:hover span.cap{/*hoverした時の変化*/
opacity:1;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-10.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="bgDU"><a href="#"><span class="mask"><img src="img/03.jpg" alt=""><span class="cap">背景が下から出現＋テキスト bgDU</span></span></a></div>
CSSの書き方
/* 背景が下から出現＋テキスト */
.bgDU{
position:relative;/*テキストの基点となる位置を定義*/
}
.bgDU span.mask{
position:relative;/*背景色の基点となる位置を定義*/
display: block;
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
.bgDU span.mask::before{
content:"";
position: absolute;
z-index: 2;
left:0;
top:0;
opacity:0;/*透過0*/
transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: translateY(100%);
background:#333;/*背景色*/
width:100%;
height: 100%;
}
.bgDU:hover span.mask::before{/*hoverした時の変化*/
opacity:1;/*透過なしに変化*/
transform: translateY(0);
}
.bgDU span.cap{/*画像の上のテキスト*/
position: absolute;
opacity:0;/*透過0*/
transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
z-index:3;/*テキストを前面に出す*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/*テキストの位置中央指定*/
color: #fff;/*テキストの色を変えたい場合はここを修正*/
line-height: 1.5;/*行の高さを1.5にする*/
}
.bgDU:hover span.cap{/*hoverした時の変化*/
opacity:1;/*透過なしに変化*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-9.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="circle"><a href="#"><span class="mask"><img src="img/02.jpg" alt=""></span></a></div>
CSSの書き方
/* 波紋 */
.circle span.mask{
position: relative;/*波紋の基点となる位置を定義*/
display: block;
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
.circle span.mask::before {
position: absolute;
content:"";
transform: scale(0);/*円の大きさ初期値は0*/
opacity: 0;/*透過0*/
width:100%;/*円のサイズ指定*/
height:100%;/*円のサイズ指定*/
border-radius:50%;/*円の角丸指定*/
background: rgba(255,255,255,0.4);/*円の背景色*/
}
.circle span.mask:hover::before {/*hoverした時の変化*/
animation: circle 0.75s;/*アニメーションの名前と速度を定義*/
}
@keyframes circle {
0% {
transform: scale(0);
opacity: 1;/*透過なし*/
}
30% {
opacity: 1;
}
100% {
transform: scale(2);/*アニメーションで大きくなった2倍の円の指定*/
}
}
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);
}