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

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

ただいまの
回答率

90.38%

  • HTML

    12230questions

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

  • CSS

    8084questions

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

  • hover

    21questions

    これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

:hover時に、translateを使って、『扉が開くように、画像が上に消えていく』アニメーションをつけたいです。

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 2,764

YuyaKodera

score 7

前提・実現したいこと

sublimetextを使っています。
前提として、今回はhtml,cssのみで実装することが目標です。
そのため、jQuery等による解決方法の提示はご遠慮くださいますよう、お願いいたします。

実現したいこととしては、説明が難しいですがタイトルの通り、
カーソルを画像に合わせるとその画像が上に消えていき、
下にあるformが姿を現わす というアニメーションをつけたいです。

発生している問題

現時点では、hover時に画像が上に動いて消えていってくれるようにはできています。
問題は、『カーソルを画像から離す前にhoverが解除されて、画像が元の位置に降りてきてしまう』
という点です。
本来であれば、このカーソルを画像の外に持ってきた際に、
hoverが解除されるように設定したいのですが。。。
何か解決策はありますでしょうか?

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>Week3課題</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>



<body>
    <section>
    <div class="form-wrap">

        <form class="effect" method="post" action="mail.php">
        <div class="form-box">
            <label class="t-title">特別試写会<br>応募申し込みフォーム</label>

            <p>
            <br>お名前<br>
            <input type="text" name="sei" maxlength="10" placeholder="姓">
            <input type="text" name="mei" maxlength="10" placeholder="名">
              </p><br>
            <p>
            性別<br>
            <input type="radio" name="gender" value="male" checked>男性
            <input type="radio" name="gender" value="female">女性
            </p><br>
            <p>
            年齢<br>
            <select name="age">
                <option value="under15">15歳未満</option>
                <option value="15~18">15~18歳</option>
                <option value="19~25" selected>19~25歳</option>
                <option value="26~35">26~35歳</option>
                <option value="36~45">36~45歳</option>
                <option value="46~55">46~55歳</option>
                <option value="over56">56歳以上</option>
            </select>
            </p><br>
            <p>
            電話番号<br>
            <input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16">
            </p>
            <p>
            Eメールアドレス<br>
            <input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30">
            </p><br>
            <p>
            当試写会を知った媒体をお教えください。<br>
            <input type="checkbox" name="media" value="twitter">Twitter
            <input type="checkbox" name="media" value="facebook">Facebook
            <input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト
            </p><br>
            <p>
            <button type="submit" name="submit" value="送信">Submit</button>
            <button type="reset" name="reset" value="リセット">Reset</button>
            </p>
        </div>
        </form>
    </div>
    <div class="move">
        <img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg">
    </div>
    </section>

    <div id="footer">
        <div class="footer-container">
            <table>

            </table>
        </div>

    </div>


</body>



</html>
* {
    margin: 0;
    padding: 0;
}

.form-wrap input[type=submitposition:] {
    color: #7c7873;
    text-shadow:0 1px 0 #fff;
}


form {
    width: 60%;
    margin: 0 auto;
    background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg);
    font-family: 'Abel', YuMincho;
    color: white;
    background-repeat: none;
    position: relative;
    overflow: hidden;
}

label {
    font-size: 20px;
}

.t-title {

}

textarea {
    width: 300px;
}

textarea:focus, input[type=text]:focus {
    background:rgba(255,255,255,.35);
}

.form-box {
    width: 100%;
    padding: 30px 0 30px 70px;
    background-color: rgba(0,0,0,0.5);
    box-sizing: border-box;
}

button {
    background: #EEE;
    color: #111;
    box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1);
    width: 100px;
    padding: 10px 0;
    font-family: 'Abel';
    font-size: 15px;
    cursor: pointer;
}

.letter {
    position: absolute;
    width: 819.59px;
    height: 580px;
    margin: -15px;
    right: 288px;
    top: 0;
    cursor: pointer;
    transition: 1.5s ease-in-out 0s;
}

 img:hover {
     transform: translate(0,-600px);
}

#footer {
    white-space: nowrap;
    width: 100%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    position: relative;
}

.footer-container {
    padding: 30px 0;
    max-width: 1000px;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
}

試したこと

transitionではなく、animationも使ってみましたが、ダメでした。

補足情報(言語/FW/ツール等のバージョンなど)

現段階では、『transitionでtranslateを使って画像を上にずらして見えなくする』
という方法を取っていますが、
他により良い方法があれば、それも教えていただけるとありがたいです。
ただし、上にも記載した通り、今回はhtmlとcssだけで実装できる方法でお願いいたします。
よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

+2

1回hoverすれば、もう二度と画像が元の位置に降りてくる必要はないんですか?
いずれにしても、CSSだけで実現するのは難しいような気がしますね。

hoverで画像を上にずらすので勝手にmouseoutとなり、hover効果が切れて戻ってきてしまいます。
画像をhoverではなくてclickで実現してみてはどうでしょうか?

CSSにclickなどというイベントはないので、チェックボックスを使います。
以下のようなイメージです。

<input type="checkbox id="trigger" /> // CSSで隠す
<label for="trigger"></label> // CSSで画像にする
<form>
</form>
#trigger {
  display: none;
}

#trigger + label {
  画像を指定
  transitionを指定
}

#trigger:checked + label {
  上に動かす
}

form {
  opacity: 0;
  transition: opacity 1s;
}

#trigger:checked ~ form {
  opacity: 1;
}


今回の仕様とは少し違いますが、昔CSSのアニメーションの勉強用に作ったものがありますので、
よろしければ参考程度にどうぞ。
https://codepen.io/root_jp/pen/OVJzev

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/02 12:33

    >このカーソルを画像の外に持ってきた際に、hoverが解除されるように設定したいのですが。。。
    とありますね。。。
    やっぱりON、OFF切り替えたいんですね。
    だとすれば、僕のは参考にならないかもです。
    解除するための画像が上に消えていってしまうので、押せません。。。
    すみません。
    消さずに、他の効果をつけて、その場に残せばいけるでしょうが、要件と違いますしね。

    キャンセル

  • 2016/09/02 13:53

    なるほど。。。
    ご丁寧にありがとうございます。
    もし仮に、画像を元の位置に二度と降りてこないようにするにはどうすれば良いのでしょうか?
    サイトのレイアウト上、画像は降りてくる必要はなくなったので。
    よろしければ、教えて下さい。

    キャンセル

  • 2016/09/02 15:25

    あ、いえいえ、画像は元の位置まで降りて来なくて大丈夫です。
    したがって、ON,OFF切り替えられなくても大丈夫です。
    最初にページ開いた時の、最初のhover時にだけ上に画像が消えて、二度と戻ってこれないようにしたいのですが。。。
    可能でしょうか?

    キャンセル

+1

今のままだと入力しようとしたときに画像が落ちてくるので、
仕様としては「.form-wrap」上にカーソルがあるとき画像がスライドアップするという感じだと思います。
ということでこういう感じではいかがでしょうか?

「.form-wrap」の中に「.move」を入れ込みます。

<div class="form-wrap">
        <form class="effect" method="post" action="mail.php">
         ~略~
        </form>
        <div class="move">
            <img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg">
        </div>
</div>
.form-wrap:hover .move .letter {
     transform: translate(0,-600px);
}


あとは「.form-wrap」のhover範囲が横幅いっぱいなのでCSSで微調整すればいい感じになると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/03 16:17

    なるほど。。。
    ご丁寧にありがとうございます。
    試してみます!

    キャンセル

+1

<div class="form-wrap">

        <form class="effect" method="post" action="mail.php">
        <div class="form-box">
            <label class="t-title">特別試写会<br>応募申し込みフォーム</label>
            <p>
            <br>お名前<br>
            <input type="text" name="sei" maxlength="10" placeholder="姓">
            <input type="text" name="mei" maxlength="10" placeholder="名">
              </p><br>
            <p>
            性別<br>
            <input type="radio" name="gender" value="male" checked>男性
            <input type="radio" name="gender" value="female">女性
            </p><br>
            <p>
            年齢<br>
            <select name="age">
                <option value="under15">15歳未満</option>
                <option value="15~18">15~18歳</option>
                <option value="19~25" selected>19~25歳</option>
                <option value="26~35">26~35歳</option>
                <option value="36~45">36~45歳</option>
                <option value="46~55">46~55歳</option>
                <option value="over56">56歳以上</option>
            </select>
            </p><br>
            <p>
            電話番号<br>
            <input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16">
            </p>
            <p>
            Eメールアドレス<br>
            <input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30">
            </p><br>
            <p>
            当試写会を知った媒体をお教えください。<br>
            <input type="checkbox" name="media" value="twitter">Twitter
            <input type="checkbox" name="media" value="facebook">Facebook
            <input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト
            </p><br>
            <p>
            <button type="submit" name="submit" value="送信">Submit</button>
            <button type="reset" name="reset" value="リセット">Reset</button>
            </p>
        </div>
        </form>
        <img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg"><!-- ここに移動 -->
    </div>
    <div id="footer">
        <div class="footer-container">
            <table>

            </table>
        </div>

    </div>
* {
    margin: 0;
    padding: 0;
}

.form-wrap input[type=submitposition:] {
    color: #7c7873;
    text-shadow:0 1px 0 #fff;
}


form {
    width: 60%;
    margin: 0 auto;
    background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg);
    font-family: 'Abel', YuMincho;
    color: white;
    background-repeat: none;
    position: relative;
    overflow: hidden;
}

label {
    font-size: 20px;
}

.t-title {

}

textarea {
    width: 300px;
}

textarea:focus, input[type=text]:focus {
    background:rgba(255,255,255,.35);
}

.form-box {
    width: 100%;
    padding: 30px 0 30px 70px;
    background-color: rgba(0,0,0,0.5);
    box-sizing: border-box;
}

button {
    background: #EEE;
    color: #111;
    box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1);
    width: 100px;
    padding: 10px 0;
    font-family: 'Abel';
    font-size: 15px;
    cursor: pointer;
}

form::after { /* 足した */
    content: '';
    right: 0 !important;
    width: 100% !important;
    background-color: rgba(230, 230, 0, 0.3);
    z-index: 1;
}

.letter,form::after { /* 足した */
    position: absolute;
    width: 819.59px;
    height: 580px;
    margin: -15px;
    right: 288px;
    top: 0;
    cursor: pointer;
    transition: 1.5s ease-in-out 0s;
}

form:hover + img,form:hover::after { /* 足した */
     transform: translate(0,-600px);
}

#footer {
    white-space: nowrap;
    width: 100%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    position: relative;
}

.footer-container {
    padding: 30px 0;
    max-width: 1000px;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
}

動くサンプル:https://jsfiddle.net/wu1xstb6/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

0

擬似要素を使えば似たような動きができました。

…ですが、結局メインの要素に対しての擬似要素の背景(画像)がホバー時にめくれ上がるだけで、本来のメインの要素はそこにずっといるのでどの道その要素が邪魔して文字入力ができませんでした。

一応コードをいじったので送ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <title>Week3課題</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>



<body>
    <section>
    <div class="form-wrap">

        <form class="effect" method="post" action="mail.php">
        <div class="form-box">
            <label class="t-title">特別試写会<br>応募申し込みフォーム</label>

            <p>
            <br>お名前<br>
            <input type="text" name="sei" maxlength="10" placeholder="姓">
            <input type="text" name="mei" maxlength="10" placeholder="名">
              </p><br>
            <p>
            性別<br>
            <input type="radio" name="gender" value="male" checked>男性
            <input type="radio" name="gender" value="female">女性
            </p><br>
            <p>
            年齢<br>
            <select name="age">
                <option value="under15">15歳未満</option>
                <option value="15~18">15~18歳</option>
                <option value="19~25" selected>19~25歳</option>
                <option value="26~35">26~35歳</option>
                <option value="36~45">36~45歳</option>
                <option value="46~55">46~55歳</option>
                <option value="over56">56歳以上</option>
            </select>
            </p><br>
            <p>
            電話番号<br>
            <input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16">
            </p>
            <p>
            Eメールアドレス<br>
            <input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30">
            </p><br>
            <p>
            当試写会を知った媒体をお教えください。<br>
            <input type="checkbox" name="media" value="twitter">Twitter
            <input type="checkbox" name="media" value="facebook">Facebook
            <input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト
            </p><br>
            <p>
            <button type="submit" name="submit" value="送信">Submit</button>
            <button type="reset" name="reset" value="リセット">Reset</button>
            </p>
        </div>
        </form>
    </div>
    <div class="move">

    </div>
    </section>

    <div id="footer">
        <div class="footer-container">
            <table>

            </table>
        </div>

    </div>


</body>



</html>
* {
    margin: 0;
    padding: 0;
}

.form-wrap input[type=submitposition:] {
    color: #7c7873;
    text-shadow:0 1px 0 #fff;
}


form {
    width: 60%;
    margin: 0 auto;
    background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg);
    font-family: 'Abel', YuMincho;
    color: white;
    background-repeat: none;
    position: relative;
    overflow: hidden;
}

label {
    font-size: 20px;
}

.t-title {

}

textarea {
    width: 300px;
}

textarea:focus, input[type=text]:focus {
    background:rgba(255,255,255,.35);
}

.form-box {
    width: 100%;
    padding: 30px 0 30px 70px;
    background-color: rgba(0,0,0,0.5);
    box-sizing: border-box;
}

button {
    background: #EEE;
    color: #111;
    box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1);
    width: 100px;
    padding: 10px 0;
    font-family: 'Abel';
    font-size: 15px;
    cursor: pointer;
}

.letter {
    position: absolute;
    width: 819.59px;
    height: 580px;
    margin: -15px;
    right: 288px;
    top: 0;
    cursor: pointer;
    transition: 1.5s ease-in-out 0s;
}

.move {
    position: absolute;
    width: 819.59px;
    height: 580px;
    margin: -15px;
    right: 288px;
    top: 0;
    cursor: pointer;
    transition: 1.5s ease-in-out 0s;
}

 .move::before {
content: '';
position: relative;
background-image: url("http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg");
background-repeat: no-repeat;
border-top: 1px solid #f13d63;
border-right: 818px solid transparent;
border-left: 1px solid transparent;
border-bottom: 490px solid transparent;
bottom: -100px;
left: 0%;
z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1.3s;
    transition: all 1.3s;
 }


 .move:hover::before {
     border-bottom: 0px solid transparent;
     transform: translate(0,-600px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1.3s;
    transition: all 1.3s;
 }

 img:hover {
     transform: translate(0,-600px);
}

#footer {
    white-space: nowrap;
    width: 100%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    position: relative;
}

.footer-container {
    padding: 30px 0;
    max-width: 1000px;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
}

ざっくり作ったのでwidthが合ってなかったり、ちゃんとホバー時に消えてなかったりするので調整してください。あくまでこういう動きは達成したというものですので。
ひとつ明確な解決策をあげるとすれば、今回は空の「.move」にbeforeをつけて擬似要素にレター画像を貼り付けホバーさせました。ということは、「.move」の中にフォーム画面のhtmlを入れることで目的は達成できるのでは?と思います。試していないのでわかりませんがほぼいけると思います。

頑張ってください。

適当に書いたのでコード汚くて申し訳ありません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/03 16:20

    ご丁寧にありがとうございます。
    そうですね。。難しいです。
    コードまで書いていただいてわかりやすかったです。
    参考に、もう少し頑張ってみます!

    キャンセル

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

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

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

  • HTML

    12230questions

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

  • CSS

    8084questions

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

  • hover

    21questions

    これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

  • トップ
  • HTMLに関する質問
  • :hover時に、translateを使って、『扉が開くように、画像が上に消えていく』アニメーションをつけたいです。