<!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";
/* 背景が中央から横に出現＋テキスト */
.bgCW {
position: relative; /*テキストの基点となる位置を定義*/
}
.bgCW span.mask {
position: relative; /*背景色の基点となる位置を定義*/
display: block;
line-height: 0; /*行の高さを0にする*/
overflow: hidden; /*拡大してはみ出る要素を隠す*/
}
.bgCW span.mask::before {
content: "";
position: absolute;
z-index: 2;
/*背景色*/
background-image: linear-gradient(
to right,
#ff8177 0%,
#ff867a 0%,
#ff8c7f 21%,
#f99185 52%,
#cf556c 78%,
#b12a5b 100%
);
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s; /*移り変わる速さを変更したい場合はこの数値を変更*/
transform: scale(0, 1);
transform-origin: center;
opacity: 0.5;
}
.bgCW span.mask:hover::before {
/*hoverした時の変化*/
transform: scale(1, 1);
opacity: 0.5;
}
.bgCW span.cap {
opacity: 0;
transition: 0.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にする*/
}
.bgCW a: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 {
margin: 50px auto; /*中央揃え*/
box-shadow: 20px -10px #df859b;
}</style>
</head>
<body>
<body>
<div class="bgCW">
<a href="#">
<span class="move mask">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/beauty.jpg" alt="">
<span class="cap">背景が中央から横に出現＋テキスト bgCW</span>
</span>
</a>
</div>
<script>
</script>
</body>
</html>