今回はタイトルの通りbefore,afterを使ってhoverで画像を表示する方法をご紹介します。
まずはデモから。
See the Pen
Untitled by sayuri (@giraffeweb)
on CodePen.0
HTMLは以下になります。
中身は好きに変更してください。
<section id="indexConts">
<div class="flex fw">
<!-- 1つめのブロック -->
<div id="facilityConts" class="contsList">
<a class="flex fw" href="">
<div class="contsBox">
<h2 class="en">Contents01</h2>
<h3>コンテンツ01</h3>
<button type="button"></button>
<div class="contsInner">
<p>ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。</p>
</div>
<div class="viewBtn white">
<span class="flex" href="">
<span class="btnLabel">もっと見る</span>
<span class="btnArrow flex"></span>
<svg class="btnLine"><rect rx="30"></rect></svg>
</span></div>
</div>
</a>
</div>
<!-- 1つめのブロック -->
<!-- 2つめのブロック -->
<div id="companyConts" class="contsList">
<a class="flex fw" href="">
<div class="contsBox">
<h2 class="en">Contents02</h2>
<h3>コンテンツ02</h3>
<button type="button"></button>
<div class="contsInner">
<p>ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。</p>
</div>
<div class="viewBtn white">
<span class="flex" href="">
<span class="btnLabel">もっと見る</span>
<span class="btnArrow flex"></span>
<svg class="btnLine"><rect rx="30"></rect></svg>
</span></div>
</div>
</a>
</div>
<!-- 2つめのブロック -->
<!-- 3つめのブロック -->
<div id="recruitConts" class="contsList">
<a class="flex fw" href="">
<div class="contsBox">
<h2 class="en">Contents03</h2>
<h3>コンテンツ03</h3>
<button type="button"></button>
<div class="contsInner">
<p>ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。ここに簡単な説明文が入ります。</p>
</div>
<div class="viewBtn white">
<span class="flex" href="">
<span class="btnLabel">もっと見る</span>
<span class="btnArrow flex"></span>
<svg class="btnLine"><rect rx="30"></rect></svg>
</span></div>
</div>
</a>
</div>
<!-- 3つめのブロック -->
</div>
</section>
全体のCSSはこんな感じ。
#indexConts {
width: 100%;
overflow: hidden;
position: relative;
&:before,&:after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #fff;
z-index: 50;
}
&:before {
right: calc(100% / 3);
}
&:after {
left: calc(100% / 3);
}
> .flex {
.contsList {
width: calc(100% / 3);
position: relative;
a {
width: 100%;
height: 700px;
padding: 0;
align-content: flex-start;
color: #fff;
&:before {
content: "";
width: calc(100% * 3);
height: 100%;
position: absolute;
top: 0;
display: block;
transition: opacity 0.6s ease;
opacity: 0;
z-index: 10;
}
&:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
transition: opacity 0.6s ease;
}
.contsBox {
width: 75%;
height: 100%;
margin: auto;
padding-top: 240px;
position: relative;
z-index: 50;
transition: padding 0.4s 0.2s ease;
h2 {
font-weight: 500;
font-size: 1.6em;
}
h3 {
margin: 10px 0 0 0;
}
button {
display: none;
}
.contsInner {
p {
margin-top: 22px;
opacity: 0;
transition: opacity 0.4s ease;
color: #fff;
line-height: 2;
}
.viewBtn {
position: absolute;
left: 0;
bottom: 115px;
}
}
}
&:hover {
opacity: 1;
.contsBox {
padding-top:110px;
transition: padding 0.4s ease;
.contsInner {
p {
opacity: 1;
}
}
}
}
}
&#facilityConts {
a {
&:after {
background: url("https://drive.google.com/uc?export=view&id=12WO27-jT3LBrN6BUdBkOSPSE7ADHWtdY") no-repeat center / cover; //hover前の画像
}
&:hover {
&:before {
left: 0;
opacity: 1;
background: url("https://drive.google.com/uc?export=view&id=1Cw7Lxgs31iaLxz-ZlWhXrRflcJyJgVd5") no-repeat center / cover; //hover後の画像
}
}
}
}
&#companyConts {
a {
&:after {
background: url("https://drive.google.com/uc?export=view&id=1ImRYVUYObHxikG3H5SKkM9zle-D6w2Ld") no-repeat center / cover; //hover前の画像
}
&:hover {
&:before {
left: -100%;
opacity: 1;
background: url("https://drive.google.com/uc?export=view&id=1XrPeXeataofZ7H8Ng64lFV2KiyQKMXPY") no-repeat center / cover; //hover後の画像
}
}
}
}
&#recruitConts {
a {
&:after {
background: url("https://drive.google.com/uc?export=view&id=1oYkfEppUYTQFXxrZH7YaPQqopUD-0Rq2") no-repeat center / cover; //hover前の画像
}
&:hover {
&:before {
left: -200%;
opacity: 1;
background: url("https://drive.google.com/uc?export=view&id=1wYikuHOe0_clfea5ZiCqhD_Xp58e9-z0") no-repeat center / cover; //hover後の画像
}
}
}
}
}
}
}