Q&A
GRAPHICという場所の写真をマウスオーバーしたら写真が暗くなり文字が表示されるエフェクトをしたいのですがどうすればよろしいでしょうか
ちなみにコードは
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <title>nitta</title> </head> <body> <div class="top"> <ul class="menu" > <!-- <li>PROFILE</li>--> <!-- <li>GRAPHIC</li>--> <!-- <li>MUSIC</li>--> <!-- <li>CONTACT</li>--> <!-- --> <a href="#contact" class="btn"> CONTACT </a> <a href="#music" class="btn"> MUSIC </a> <a href="#graphics" class="btn"> GRAPHICS </a> <a href="#profile" class="btn"> PROFILE </a><!-- このhrefで指定したものを別のとこのid=""で指定してジャンプする--> </ul> <p><img src="img/rogo.png"></p><!--ロゴ--> </div> <header> <section class="icon"> <p><img src="img/profile.png"></p> </section> <section class="profile"> <h2 id="profile">PROFILE</h2><!--ここでidを指定し、メニューから移動する--> <div class="photo-show"> <img src="img/pro1.jpg"> <img src="img/pro2.jpg"> <img src="img/pro3.jpg"> <img src="img/pro4.jpg"> </div> <div class="text"> <p>自転車に乗ったり音楽やったりデザインをしています。</p> </div> </section> <section class="gra"><!--section2--> <h2 id="graphics">GRAPHICS</h2> <div class="container"> <div class="item"> <a href="prev1.html"><img src="img/gra1.jpg"></a> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> <div class="container"> <div class="item"> <img src="img/gra4.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra5.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra6.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> </section> <section class="music"> </section> <section class="music"> <h2 id="music">MUSIC</h2> <div class="music-container"> <div class="music-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/nul4IXdX8HE" frameborder="0" allowfullscreen></iframe><!--youtubeの埋め込みリンク--> </div> </div> </div>- </section> <section class="contact"> <h2 id="contact">CONTACT</h2> </section> </header> <footer> <p>上に戻る</p> <div class="sita"> </div> </footer> </body> </html>
```@charset "utf-8"; /* background-image: url("../img/wallpaper.jpg");*/ body{/*初期設定、余計なmargin,paddingを0に*/ font-size: 14px; font-family: Verdana, sans-serif; margin: 0; padding: 0; background: #f2f2f2; /*初期設定*/ } p{/*行間がゆったりする*/ line-height: 2; } .top { width: 90%; margin: 0 auto; } .menu { display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ list-style: none; padding: 0; margin: 0; /*余計なマージンパディング取る、*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } /*------------ボタンアニメーション---------------------*/ .btn::before { content: ''; position: absolute; bottom: 0%; left: 0px; width: 100%; height: 1px; background: #000000; display: block; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1) } .btn:hover::before { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1) } .btn{ padding: 15px 100px; margin:10px 4px; color: #000000; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; display: inline-block;/*横にする設定*/ cursor: pointer; margin: 15px; padding: 0; display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ float: right;/*mysiteも入っているheader-pc-menuの中に右にする設定*/ } /*---------------------------------*/ .top img { display: inline-block;/*横にする設定*/ width: 50px; height: 50px; text-align: left; cursor: pointer; } .container{/*ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width:80%; margin: 0 auto; } .text{ width:80%; margin: 0 auto; max-width: 350px;} section{ background: #fff;/*ここを消してbodyに画像指定すると背景が設定できる*/ padding: 60px 0; } section h2{/*文字を中央ぞろえ、下にマージン空き*/ text-align: center; } section h3{/*graprevのせってい*/ text-align: center; } .icon{ /*背景画像*/ background-image: url("../img/wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed;/*背景を固定している*/ background-position: center; padding-bottom: 600px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ } .icon img{ display: block; margin-left: auto; margin-right: auto; width: 150px; height: 150px; } /*PROFILE*/ .profile .item{/*newsの囲っているやつを中央揃え*/ text-align: center; } .profile p{/*テキストまで中央になってしまったのでここで解除する*/ text-align: left; } /*features同様アイテム同士の空き*/ .profile .item{/*写真と文字を囲っているfeaturesの下の空き*/ margin-bottom: 10px; } .profile .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*GRAPHICS*/ .gra .container{ display: flex; justify-content: space-between;/*均等に余白が空く設定*/ } .gra .item{/*graに入っている画像と文字に対して30%*/ width: 30%; text-align: center; margin-bottom: 10px; } .gra .item img{/*画像が30％だとちゃんと見えないので画像だけ100%に*/ width: 100%; } .gra p{/*テキストまで中央になってしまったのでここで解除する*/ text-align: left; } .gra .item:last-child{/*これにだけ指定という意味*/ margin-bottom: 0; } /*-----------------------PREV--------------*/ .prevpic { margin: 0 auto; /*縦余白30pxは任意*/ text-align:center; margin-left:auto; margin-right:auto; } /*画像アニメーション*/ .photo-show { height: 440px; /*表示したい大きさ*/ margin: 30px auto; /*縦余白30pxは任意*/ max-width: 100%; /*position: relative;*/ width: 300px; /*表示したい大きさ、height と合わせる*/ } .photo-show img { animation: show 8s infinite; -webkit-animation: show 8s infinite; border-radius: 50%; /*height: auto;*/ max-width: 100%; opacity: 0; position: absolute; /*画像を全て重ねる*/ } /*アニメーション*/ @keyframes show { 0% {opacity:0} 20% {opacity:1} 30% {opacity:1} 40% {opacity:0} } @-webkit-keyframes show { 0% {opacity:0} 20% {opacity:1} 30% {opacity:1} 40% {opacity:0} } /*各画像のアニメーションの開始時間をずらす*/ .photo-show img:nth-of-type(1) { animation-delay: 0s; -webkit-animation-delay: 0s; } .photo-show img:nth-of-type(2) { animation-delay: 2s; -webkit-animation-delay: 2s; } .photo-show img:nth-of-type(3) { animation-delay: 4s; -webkit-animation-delay: 4s; } .photo-show img:nth-of-type(4) { animation-delay: 6s; -webkit-animation-delay: 6s; } /* .photo-show img:nth-of-type(5) { animation-delay: 8s; -webkit-animation-delay: 8s } .photo-show img:nth-of-type(6) { animation-delay: 10s; -webkit-animation-delay: 10s; } .photo-show img:nth-of-type(7) { animation-delay: 12s; -webkit-animation-delay: 12s; } .photo-show img:nth-of-type(8) { animation-delay: 14s; -webkit-animation-delay: 14s; }*/ /*マウスが画像に重なった際、動きを止めて四角くする*/ .photo-show img { transition: 0.2s; -webkit-transition: 0.2s; } .photo-show:hover img { animation-play-state: paused; -webkit-animation-play-state: paused; border-radius: 0; } /*MUSIC*/ .music-container{/*ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 左右に一定の空きができる*/ width: 80%; margin: 0 auto; } .music iframe{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .music-wrapper {/*padding-topかbottomで％を指定するとcssで、widthに対する比率となる、56.25はyoutubeの16:9の比率を指定*/ padding-bottom: 56.25%; height: 0; position: relative; } /*画面が570px以上になったとき*/ @media (min-width: 570px){ .container{ width: 570px; } .music-container{ width:570px; } } /*画面が570px以上になったとき*/ @media (min-width: 820px){ .container{ width: 820px; } .music-container{ width:820px; } }```
ちなみに適用したいコードは
HTML
CSS
figure {
position: relative;
overflow: hidden;
width: 300px;
}
figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
}
figure:hover figcaption {
opacity: 1;
}
回答1件
0
以下のように行ってみてはいかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7 <title>nitta</title> 8 <style type="text/css"> 9 10body{font-family:Verdana,sans-serif;font-size:14px;margin:0;padding:0;background:#f2f2f2}p{line-height:2}.top{width:90%;margin:0 auto}.menu{display:block;margin:0;padding:0;list-style:none}.btn::before{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;content:'';-webkit-transition:transform .4s cubic-bezier(1,0,0,1);transition:transform .4s cubic-bezier(1,0,0,1);-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top;background:#000}.btn:hover::before{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.btn{font-family:sans-serif;position:relative;display:block;float:right;margin:15px;padding:0;cursor:pointer;text-align:center;text-decoration:none;text-transform:uppercase;color:#000}.top img{display:inline-block;width:50px;height:50px;cursor:pointer;text-align:left}.container{width:80%;margin:0 auto}.text{width:80%;max-width:350px;margin:0 auto}section{padding:60px 0;background:#fff}section h2{text-align:center}section h3{text-align:center}.icon{padding-bottom:600px;background:no-repeat fixed center url("https://placehold.jp/e0e0e0/ffffff/650x650.png?text=%20")}.icon img{display:block;width:150px;height:150px;margin-right:auto;margin-left:auto}.profile .item{text-align:center}.profile p{text-align:left}.profile .item{margin-bottom:10px}.profile .item:last-child{margin-bottom:0}.gra .container{display:flex;justify-content:space-between}.gra .item{position:relative;overflow:hidden;width:30%;text-align:center}.gra .item img{width:100%}.gra figcaption{position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;-webkit-transition:.3s;transition:.3s;text-align:left;opacity:0;background:rgba(0,0,0,.6)}.gra figcaption:hover{text-align:left;opacity:1}.prevpic{margin:0 auto;text-align:center}.photo-show{width:300px;max-width:100%;height:440px;margin:30px auto}.photo-show img{position:absolute;max-width:100%;-webkit-animation:show 8s infinite;animation:show 8s infinite;opacity:0;border-radius:50%}@keyframes show{0%{opacity:0}20%{opacity:1}30%{opacity:1}40%{opacity:0}}@-webkit-keyframes show{0%{opacity:0}20%{opacity:1}30%{opacity:1}40%{opacity:0}}.photo-show img:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}.photo-show img:nth-of-type(2){-webkit-animation-delay:2s;animation-delay:2s}.photo-show img:nth-of-type(3){-webkit-animation-delay:4s;animation-delay:4s}.photo-show img:nth-of-type(4){-webkit-animation-delay:6s;animation-delay:6s}.photo-show img{-webkit-transition:.2s;transition:.2s}.photo-show:hover img{-webkit-animation-play-state:paused;animation-play-state:paused;border-radius:0}.music-container{width:80%;margin:0 auto}.music iframe{position:absolute;top:0;left:0;width:100%;height:100%}.music-wrapper{position:relative;height:0;padding-bottom:56.25%}@media(min-width:570px){.container{width:570px}.music-container{width:570px}}@media(min-width:820px){.container{width:820px}.music-container{width:820px}}figure{position:relative;overflow:hidden;width:300px}figcaption{position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;-webkit-transition:.3s;transition:.3s;opacity:0;background:rgba(0,0,0,.6)}figure:hover figcaption{opacity:1} 11 </style> 12</head> 13<body> 14<div class="top"> 15 <ul class="menu"> 16 <li> 17 <a href="#contact" class="btn"> 18 CONTACT 19 </a> 20 </li> 21 <li> 22 <a href="#music" class="btn"> 23 MUSIC 24 </a> 25 </li> 26 <li> 27 <a href="#graphics" class="btn"> 28 GRAPHICS 29 </a> 30 </li> 31 <li> 32 <a href="#profile" class="btn"> 33 PROFILE 34 </a> 35 </li> 36 </ul> 37 <p> 38 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/rogo.png"> 39 </p> 40</div> 41<header> 42 <section class="icon"> 43 <p> 44 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/profile.png"> 45 </p> 46 </section> 47 <section class="profile"> 48 <h2 id="profile">PROFILE</h2> 49 <div class="photo-show"> 50 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro1.jpg"> 51 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro2.jpg"> 52 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro3.jpg"> 53 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro4.jpg"> 54 </div> 55 <div class="text"> 56 <p> 57 自転車に乗ったり音楽やったりデザインをしています。 58 </p> 59 </div> 60 </section> 61 <section class="gra"> 62 <h2 id="graphics">GRAPHICS</h2> 63 <div class="container"> 64 <figure class="item"> 65 <a href="prev1.html"> 66 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra1.jpg"> 67 </a> 68 <figcaption> 69 hello. hello. hello. hello. 70 </figcaption> 71 </figure> 72 <figure class="item"> 73 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra2.jpg"> 74 <figcaption> 75 hello. hello. hello. hello. 76 </figcaption> 77 </figure> 78 <figure class="item"> 79 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra3.jpg"> 80 <figcaption> 81 hello. hello. hello. hello. 82 </figcaption> 83 </figure> 84 </div> 85 <div class="container"> 86 <figure class="item"> 87 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra4.jpg"> 88 <figcaption> 89 hello. hello. hello. hello. 90 </figcaption> 91 </figure> 92 <figure class="item"> 93 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra5.jpg"> 94 <figcaption> 95 hello. hello. hello. hello. 96 </figcaption> 97 </figure> 98 <figure class="item"> 99 <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra6.jpg"> 100 <figcaption> 101 hello. hello. hello. hello. 102 </figcaption> 103 </figure> 104 </div> 105 </section> 106 <section class="music"> 107 <h2 id="music">MUSIC</h2> 108 <div class="music-container"> 109 <div class="music-wrapper"> 110 <iframe width="560" height="315" src="https://www.youtube.com/embed/nul4IXdX8HE" frameborder="0" 111 allowfullscreen></iframe> 112 </div> 113 </div> 114 </section> 115 <section class="contact"> 116 <h2 id="contact">CONTACT</h2> 117 </section> 118</header> 119<footer> 120 <p>上に戻る</p> 121 <div class="sita"></div> 122</footer> 123</body> 124</html>
投稿2017/07/21 23:20
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。