* { box-sizing: border-box; } .row figure { height: 200px; width: 300px; margin: 0; background-size: cover; background-position: 50% 50%; transition: all 1s ease-in-out; background-repeat: no-repeat; z-index: 2; display: inline-block; position: relative; } .row a { display: inline-block; text-align: center; margin: 40px; text-decoration: none; color: white; } .row a p { position: absolute; opacity: 0; font-size: 20px; top: 45%; z-index: 100; left: 0; right: 0; margin: auto; } figure:hover p { opacity: 1; } figure:after { content: ""; display: inline-block; height: 100%; width: 100%; background-color: blue; position: absolute; left: 0; bottom: 0; opacity: 0; transition: all 0.4s ease-in-out 0s; z-index: 99; } figure:hover:after { opacity: 0.7; } .photo01 { background-image: url("http://opfokinaw.kb.shopserve.jp/pic-labo/kaisha01.jpg"); } .photo02 { background-image: url("http://opfokinaw.kb.shopserve.jp/pic-labo/kaisha09.jpg"); } .photo03 { background-image: url("http://opfokinaw.kb.shopserve.jp/pic-labo/kaisha02.jpg"); } .photo04 { background-image: url("http://opfokinaw.kb.shopserve.jp/pic-labo/kaisha03.jpg"); } .photo05 { background-image: url("http://opfokinaw.kb.shopserve.jp/pic-labo/kaisha05.jpg"); } .photo06 { background-image: url("http://opfokinaw.kb.shopserve.jp/pic-labo/kaisha07.jpg"); } /* lightbox */ .lightbox-target { position: fixed; top: -100%; width: 100%; background: rgba(0, 0, 0, 0.7); width: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; overflow: hidden; z-index: 300; } .lightbox-target .container { margin: auto; position: absolute; top: 50vh; left: 50vw; background-color: white; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); transition: 0.5s ease-in-out; text-align: left; transform: translate3d(-50%, -50%, 0); } a.lightbox-close { display: block; width: 150px; height: 50px; background: white; color: black; text-decoration: none; position: absolute; top: 0; right: 0; margin: 0; padding-top: 10px; } .lightbox-target:target { opacity: 1; top: 0; bottom: 0; } .lightbox-target:target img { height: 400px; vertical-align: top; }

工場紹介

カレンダー
  • 今日
  • 定休日

土日祝日の配送業務はお休みとなります。
ネットでのご注文は24時間受け付けております。

ページトップへ