Private code
ボタンをhoverで浮かす。＆ ３カラム画像文字【奥多摩TOP】
【奥多摩TOP】：https://www.okutamas.co.jp/
【HTML 例】
<div class="link">
<div class="bnr">
<a href="https://www.okutamas.co.jp/hatonosu/" target="_blank">
<img src="img/bnr06.jpg" alt="">
<h2>奥多摩の風 はとのす荘</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/hikawa/" target="_blank">
<img src="img/bnr02.jpg" alt="">
<h2>氷川キャンプ場</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/kawai/" target="_blank">
<img src="img/bnr03.jpg" alt="">
<h2>川井キャンプ場</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/moegi/" target="_blank">
<img src="img/bnr04.jpg" alt="">
<h2>奥多摩温泉 もえぎの湯</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/kokusai/" target="_blank">
<img src="img/bnr01.jpg" alt="">
<h2>氷川国際ます釣場</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/seseragi/" target="_blank">
<img src="img/bnr05.jpg" alt="">
<h2>せせらぎの里美術館</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/sikinoie/" target="_blank">
<img src="img/bnr07.jpg" alt="">
<h2>手づくり工房 四季の家</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/sogo/natural_water.htm" target="_blank">
<img src="img/bnr08.jpg" alt="">
<h2>奥多摩天然水</h2>
</a>
</div>
<div class="bnr">
<a href="https://www.okutamas.co.jp/sogo/" target="_blank">
<img src="img/bnr09.jpg" alt="">
<h2>会社案内</h2>
</a>
</div>
</div>
【CSS】
.link {
max-width: 800px;
margin: 0 auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
【CSS ボタンごとに before作成 nthで作成】
.welcomedom .link .bnr:nth-of-type(1):before {
content: "泊まる";
position: absolute;
top: 10px;
left: 10px;
background: #1d6b90;
color: #fff;
border-radius: 50%;
padding: 10px;
font-size: 15px;
}
.welcomedom .link .bnr:nth-of-type(2):before, .welcomedom .link .bnr:nth-of-type(3):before {
content: "遊ぶ";
position: absolute;
top: 10px;
left: 10px;
background: #dd481e;
color: #fff;
border-radius: 50%;
padding: 10px;
font-size: 15px;
}
【CSS 文字の指定】
.link .bnr:nth-of-type(1) h2, .link .bnr:nth-of-type(2) h2, .link .bnr:nth-of-type(3) h2 {
background: #dd481e;
color: #fff;
padding: 8px 0;
font-weight: normal;
font-size: 16px;
}
【CSS フレックス指定 、フォバー指定】
.link > div {
width: calc(32% - 10px);
background-repeat: no-repeat;
margin: 10px;
position: relative;
transition: .3s;
}
.link > div:hover {
transform: translateY(-5px);
box-shadow: 2px 2px 10px #333;
}