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

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

ただいまの
回答率

90.50%

  • HTML

    11430questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7512questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

hover した時の cssが適応されません

解決済

回答 1

投稿

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

miramikan

score 16

画像にマウスを重ねたときに、キランと光るようなエフェクトをネットで見つけ、ぜひ実装したいと思いました。
(https://codepen.io/nxworld/pen/ZYNOBZ#demo14)

ですが、HTMLにclass名をつけても、cssの効果が適応されません。
もともと書いたcssが邪魔をしているのでしょうか?
原因がわかる方、どこを変えたら適応できるのか教えていただきたいです。
よろしくお願い致します。

<div class="main">
        <p class="photo-title"><p>


            <div class="whole-photo">
              <div class="box">

               <div id="photo01" class="photoframe">
                     <p class="photo">

                         <img src="pic.jpg" class="figure">

                     </p>
                    <p class="in"></p>
                 </div>


                 <div class="note">
                      <div class="letters">
                      <p>####</p>
                      <p>####</p>
                     </div>
                 </div>


             </div>

                 <div>
                  <nav class="tab-change">
                        <a href='#howtosee'>###</a>
                      <a href='#this-week'>###</a>
                       <a href='#today'>###</a>


                    </nav>
                </div>


                    <div id='today' class='content'>


                    </div>
                 <div id='this-week' class='content'>

                    </div>
                    <div id='howtosee' class='content'>
                        <img src="">
                        <img src="">
                    </div>
.main{
    width: 100%;
    height: 1000px;
    padding: 100px 0px;
    margin: 0px;

}


img {
  max-width: 100%;
  height: auto;
}
body{
  max-width: 100%;
  height: auto;
}

.photo-title{
 font-size:25px;
 margin-left:150px;
 border-bottom:3px solid #23c1ea;
 width:375px;
 max-width: 100%;
 height: auto;
}

.whole-photo{
  margin-left:70px;
  margin-top: 50px;
  position:relative;
}


.photoframe {
  position: relative;
  display: inline;
  float: left;
  width: 340px;
  height: 430px;
  overflow: hidden;
  margin: 0 10px 20px;
  margin-left:80px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  z-index: 1;
}

.photoframe .photo {
  width: 340px;
  height: 385px;
  overflow: hidden;
  margin: 0 0 10px;
  padding: 0;
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.photoframe img {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  z-index: -1;
  width:339px;
  height:359px;
}

.figure {
    position: relative;
}
.figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

.note{
    width:390px;
    height:460px;
    float:right;
    margin-right:160px;
    position: relative;
    background-color: #ffffe7;
    background-image:
    linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
    background-size: 100% 1.5em;
    line-height:1.5em;
    max-width: 100%;

  }

.in{
  padding-bottom: 20px;
  font-size: 28px;
  margin-top: 5px;

}


.letters{
  padding-top:10px;
  padding-left:20px;
  padding-right:20px;
  font-size:28px;
  line-height:130%;
}

.tab-change{
  margin-right:45px;
  max-width: 100%;
  height:auto;
}

.tab-change a{
  border-radius: 7px 7px 0 0;
  display:inline-block;
  line-height: 38px;
  text-align: center;
  background-color:white ;
  color: black;
  margin-left:0px;
  margin-right:55px;
  margin-top:100px;
  font-size:20px;
  float:right;
  text-decoration: none;
  padding: 0 32px;

}

.tab-change a:hover{
  opacity:0.6;
}

.tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
.tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
.tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }



.content {
  height: 320px;
  display: none;
  padding-top:0px;


}

.content:target {
  display: block;
}

.week-title{
 border-bottom:3px solid #23c1ea;
 width:220px;
 padding-top:200px;
 margin-left:20px;


}

.day-title{
 margin-left:50px;
 border-bottom:3px solid #23c1ea;
 width:290px;
 padding-top:200px;


}
 table {
   border:1px solid #000;
   margin-left:60px;
   margin-right:60px;
   background-color: white;
}

.day {
 text-align: center;
 font-size: 22px;
 margin-top: 40px;
 margin-left: 40px;;

       }

.day img {
width:   200px;
       }

.day tr td{
border:1px solid black;

}

.week{
  text-align: center;
  margin-left:10px;
  font-size: 22px;
   margin-top: 40px;
}

.week tr td{
  border:1px solid black;
}
.week img {
  width:160px;

}



.box:after {
 content: ' ';
 clear: both;
 display: block;
       }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

元のサンプルをよく見てください。
figure クラスを適用する要素が違います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/02 19:59

    ありがとうございました!

    キャンセル

同じタグがついた質問を見る

  • HTML

    11430questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7512questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。