<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style>@charset "utf-8";
/* 背景が上から出現＋テキスト */
.bgUD {
position: relative; /*テキストの基点となる位置を定義*/
width: 80vw;
margin: 0 auto; /*中央揃え*/
}
/* 背景が下から出現＋テキスト */
.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; /*透過0*/
transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
transform: translateY(-100%);
background-image: linear-gradient(
to right,
#ff8177 0%,
#ff867a 0%,
#ff8c7f 21%,
#f99185 52%,
#cf556c 78%,
#b12a5b 100%
);
width: 100%;
height: 100%;
}
.bgUD:hover span.mask::before {
/*hoverした時の変化*/
opacity: 0.5; /*透過なしに変化*/
transform: translateY(0);
}
.bgUD span.cap {
/*画像の上のテキスト*/
position: absolute;
opacity: 0; /*透過0*/
transition: 0.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; /*透過なしに変化*/
}
/*========= レイアウトのためのCSS ===============*/
a {
color: #333;
text-decoration: none;
}
.lead {
position: absolute;
color: #fff;
text-shadow: 2px 2px 5px #000;
font-size: clamp(12px, 5vw, 2rem);
text-align: center;
font-weight: bold;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
white-space: nowrap;
}
/*画像のレスポンシブ*/
img {
width: 100%;
height: auto;
}
/* 画像基本設定 */
.move {
position: relative;
margin: 50px auto; /*中央揃え*/
box-shadow: 20px -10px #df859b;
}</style>
</head>
<body>
<body>
<div class="bgUD">
<a href="#">
<span class="move mask">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/beauty.jpg" alt="">
<span class="cap">背景が上から出現＋テキスト bgUD</span>
</span>
</a>
</div>
<script>
</script>
</body>
</html>