⑬
⑭
⑯
.sample1 { width: 150px; height: 150px; overflow:hidden; margin: 10px 8px 10px 16px; position:relative; /* 相対位置指定 */ display: inline-block; } .sample1 .caption { font-size:20px; text-align: center; padding-top:60px; color:#fff; } .sample1 .mask { width:100%; height:100%; position:absolute; /* 絶対位置指定 */ top:0; left:0; opacity:0; /* マスクを表示しない */ background-color:rgba(0,0,0,0.5); /* マスクは半透明 */ -webkit-transition:all 0.4s ease; transition:all 0.4s ease; } .sample1:hover .mask { opacity:1; /* マスクを表示する */ } .sample2 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample2 .caption { font-size: 20px; text-align: center; color: #fff; } .sample2 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .sample2:hover .mask { opacity: 1; /* マスクを表示する */ padding-top: 50px; /* ホバーで下にずらす */ } .sample3 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample3 .caption { font-size: 15px; color: #fff; padding-top: 50px; transform: translateX(-15px); } .sample3 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .sample3:hover .mask { opacity: 1; /* マスクを表示する */ padding-left: 50px; /* 右にずらす */ } .sample4 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample4 .caption { font-size: 10px; text-align: center; color: #fff; padding-top: 60px; } .sample4 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .sample4:hover .mask { opacity: 1; /* マスクを表示する */ -webkit-transform: scale(2); /* 2倍に拡大 */ transform: scale(2); } .sample5 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample5 .caption { font-size: 20px; color: #fff; padding-top:50px; padding-left:20px; } .sample5 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(0); /* 大きさを0にして表示しない */ transform: scale(0); } .sample5:hover .mask { -webkit-transform: scale(1); /* 大きさを1にして表示する */ transform: scale(1); } .sample6 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample6 .caption { font-size: 20px; color: #fff; padding-top: 50px; padding-left: 20px; } .sample6 .mask { width: 100%; height: 100%; position: absolute; top: -100%; /* 枠の上に置いて表示させない */ left: 0; background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .sample6:hover .mask { top: 0; /* 下に降りてくるように見せる */ } .sample7 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample7 .caption { font-size: 20px; color: #fff; padding-top: 50px; padding-left: 20px; } .sample7 .mask { width: 100%; height: 100%; position: absolute; top: 100%; /* 枠の上に置いて表示させない */ left: 0; background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .sample7:hover .mask { top: 0; /* 下に降りてくるように見せる */ } .sample8 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample8 .caption { font-size: 15px; color: #fff; padding-top:5px; text-align: center; } .sample8 .mask { width: 100%; height: 30px; position: absolute; top: -50px; /* 枠の上に置いて表示しない */ left: 0; background-color: rgba(0,0,0,0.8); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .sample8:hover .mask { top: 0px; /* 下に降りてくるように見せる */ } .sample8 img { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(1.2); /* 1.2倍の大きさで表示 */ transform: scale(1.2); } .sample8:hover img { margin-top: 30px; /* 画像の絵を下にずらす */ -webkit-transform: scale(1); /* 元の大きさに戻す */ transform: scale(1); } .sample9 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample9 .caption { font-size:15px; color: #fff; padding-top: 15px; padding-left: 5px; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .sample9 .mask { width: 30%; /* 画像の半分の大きさにする */ height: 100%; position: absolute; top: 0; left: 0; margin-left: -30%; /* 枠の左に置いて表示させない */ background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .sample9:hover .mask { margin-left: 0px; /* 右にずらして表示する */ } .sample9 img { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .sample9:hover img { margin-left: 30%; /* 画像を半分サイズ、右にずらす */ } .sample10 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample10 .caption { font-size: 20px; color: #fff; text-align: center; padding-top: 50px; } .sample10 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; /* 表示させない */ background-color: rgba(0,0,0,0.5); -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .sample10:hover .mask { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; /* ホバーで表示する */ } .sample11 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample11 .caption { font-size: 20px; color: #fff; text-align: center; padding-top: 50px; } .sample11 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; /* 表示させない */ background-color: rgba(0,0,0,0.5); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .sample11:hover .mask { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; /* ホバーで表示する */ } .sample12 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample12 .caption { font-size: 20px; color: #fff; text-align: center; padding-top: 50px; } .sample12 .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; /* 表示させない */ background-color: rgba(0,0,0,0.5); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .sample12:hover .mask { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; /* ホバーで表示する */ } .sample13 { width: 150px; height: 150px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; display: inline-block; } .sample13 .mask { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,0.5); -webkit-transition: .3s; transition: .3s; opacity: 0; } .sample13 h3, .sample13 p { position: absolute; left: -100%; width: 150px; color: white; -webkit-transition: .3s; transition: .3s; font-weight: normal; } .sample13 h3 { top: 30px; } .sample13 p { top: 60px; font-size: 18px; } .sample13:hover .mask { opacity: 1; } .sample13:hover .mask h3 { left: 30px; } .sample13:hover .mask p { left: 50px; } .sample13:hover .mask h3 { -webkit-transition-delay: .2s; transition-delay: .2s; } .sample13:hover .mask p { -webkit-transition-delay: .5s; transition-delay: .5s; } .sample14 { position: relative; overflow: hidden; width: 150px; height: 150px; display: inline-block; margin: 10px 8px 10px 16px; } .sample14 h3, .sample14 p { position: absolute; z-index: 2; width: 100%; height: 40px; line-height: 40px; background: rgba(0,0,0,0.5); -webkit-transition: .3s; transition: .3s; color: white; font-weight: normal; } .sample14 h3 { top: -60px; padding-left: 30px; } .sample14 p { bottom: -60px; padding-left: 60px; } .sample14:hover .mask h3 { top: -20px; } .sample14:hover .mask p { bottom: -20px; } .sample15 { width: 150px; height: 150px; margin: 0 auto; position: relative; overflow: hidden; display: inline-block; margin: 10px 8px 10px 16px; } .sample15 .mask:after { position: absolute; border: solid 1px #fff; color: white; content: ""; display: block; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transform: scale(1.0, 1.0); transition: all 0.2s ease-out; } .sample15 .mask:hover:after { opacity: 1; transform: scale(0.92, 0.88); } .sample15 .caption { position: absolute; width: 100%; top: 50%; left: 20px; margin-top: -1em; font-size: 20px; letter-spacing: 5px; opacity: 0; transition: all .3s ease-out .2s; color: white; } .sample15 .mask:hover .caption { letter-spacing: 1px; opacity: 1; } .sample15 .mask img { transition: all .8s ease-out; } .sample3 .mask:hover img { opacity: .4; transform: scale(1.3); } .sample16 { width: 150px; height: 150px; margin: 0 auto; position: relative; overflow: hidden; display: inline-block; margin: 10px 8px 10px 16px; } .sample16 .mask:after { position: absolute; background: #111; content: ""; display: block; width: 90%; height: 1px; left: 5%; top: 50%; transform: scale(0); transition: all 0.7s ease-out; } .sample16 .mask:hover:after { transform: scale(1); } .sample16 .caption p, .sample16 .caption h3 { position: absolute; text-align: center; width: 100%; opacity: 0; transition: all 0.4s ease-out 0.4s; } .sample16 .caption h3 { bottom: 45%; transform: translateY(-40px); } .sample16 .caption p { top: 45%; transform: translateY(40px); } .sample16 .mask:hover .caption p, .sample16 .mask:hover .caption h3 { opacity: 1; transform: translateY(0); } .sample16 .mask img { transition: all 0.5s ease-out; } .sample16 .mask:hover img { opacity: .4; transform: scale(1.2); }