質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.04%

figureで画像をマウスオーバーのエフェクトについて

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 974

sutosi

score 23

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
<figure>
<img src="image.jpg" />
<figcaption>
<h3>Caption Title</h3>
<p>caption text here ...</p>
</figcaption>
</figure>

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;
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

以下のように行ってみてはいかがでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>nitta</title>
    <style type="text/css">

body{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}
    </style>
</head>
<body>
<div class="top">
    <ul class="menu">
        <li>
            <a href="#contact" class="btn">
                CONTACT
            </a>
        </li>
        <li>
            <a href="#music" class="btn">
                MUSIC
            </a>
        </li>
        <li>
            <a href="#graphics" class="btn">
                GRAPHICS
            </a>
        </li>
        <li>
            <a href="#profile" class="btn">
                PROFILE
            </a>
        </li>
    </ul>
    <p>
        <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/rogo.png">
    </p>
</div>
<header>
    <section class="icon">
        <p>
            <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/profile.png">
        </p>
    </section>
    <section class="profile">
        <h2 id="profile">PROFILE</h2>
        <div class="photo-show">
            <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro1.jpg">
            <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro2.jpg">
            <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro3.jpg">
            <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/pro4.jpg">
        </div>
        <div class="text">
            <p>
                自転車に乗ったり音楽やったりデザインをしています。
            </p>
        </div>
    </section>
    <section class="gra">
        <h2 id="graphics">GRAPHICS</h2>
        <div class="container">
            <figure class="item">
                <a href="prev1.html">
                    <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra1.jpg">
                </a>
                <figcaption>
                    hello. hello. hello. hello.
                </figcaption>
            </figure>
            <figure class="item">
                <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra2.jpg">
                <figcaption>
                    hello. hello. hello. hello.
                </figcaption>
            </figure>
            <figure class="item">
                <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra3.jpg">
                <figcaption>
                    hello. hello. hello. hello.
                </figcaption>
            </figure>
        </div>
        <div class="container">
            <figure class="item">
                <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra4.jpg">
                <figcaption>
                    hello. hello. hello. hello.
                </figcaption>
            </figure>
            <figure class="item">
                <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra5.jpg">
                <figcaption>
                    hello. hello. hello. hello.
                </figcaption>
            </figure>
            <figure class="item">
                <img src="https://placehold.jp/f5f5f5/3d4070/300x300.png?text=img/gra6.jpg">
                <figcaption>
                    hello. hello. hello. hello.
                </figcaption>
            </figure>
        </div>
    </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>
            </div>
        </div>
    </section>
    <section class="contact">
        <h2 id="contact">CONTACT</h2>
    </section>
</header>
<footer>
    <p>上に戻る</p>
    <div class="sita"></div>
</footer>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる