JQueryを学習しているのですが、キャプション表現がうまく動作しません。
下からギュニョっと黒帯のテキストを表示させ、画像もそれに合わせて黒帯のheight分ずれる感じに表現させたいです。
一応マウスを要素に置くと動作しているのが検証ツール上で確認できるのですが、なぜか黒帯の要素と画像が重なり合ってくれません。
positionの値を弄っても、それ以上上に上がらないのです。
header { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; } img { width: 100%; vertical-align: bottom; } header h1{ font-size: 40px; } #firstView { height: 600px; width: 100%; background-color: lightblue; } #firstView > .inner { max-width: 1262px; width: 96%; padding-top: 150px; margin: auto; } #firstView p { margin: auto; width: 100%; max-width: 400px; overflow: hidden; height: 262px; } #firstView ul { display: flex; justify-content: center; align-items: center; } #firstView ul>li { width: 100%; } #firstView p strong { position: relative; display: flex; align-items: center; z-index: 1; width: 400px; height: 50px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20px; text-align: left; bottom: 50px; padding-left: 20px; } #firstView p span { position: absolute; display: block; z-index: 0; top: 229px; width: 400px; height: 262px; box-shadow: inset 0 0 50px rgba(50, 50, 0, 0.6), inset 0 0 100px rgba(50, 50, 0, 0.3); background: rgba(255, 155, 0, 0.2); opacity: 0; } #firstView p:nth-child(3) strong { bottom: -120px; background: rgba(34, 34, 34, 1); } #firstView p:nth-child(3) img { position: relative; top: 0px; }
<body> <header> <h1>study jQuery</h1> </header> <section id="firstView"> <div class="inner"> <ul> <li> <p> <img src="img/01_img.jpg"> <strong>Bird-1</strong><span></span> </p> </li> <li> <p> <img src="img/02_img.jpg"> <strong>Bird-2</strong><span></span> </p> </li> <li> <p> <img src="img/03_img.jpg"> <strong>Bird-3</strong><span></span> </p> </li> </ul> </div> </section> </body>
$(function(){ var duration = 300; var $firstView = $("firstView, li"); $firstView.filter(':nth-child(3)') .on('mouseover', function(){ $(this).find('strong').stop(true).animate({bottom: '0px'}, duration); $(this).find('span').stop(true).animate({opacity: 1}, duration); $(this).find('img').stop(true).animate({top: '-20px'}, duration * 1.3); }) .on('mouseout', function(){ $(this).find('strong').stop(true).animate({bottom: '-120px'}, duration); $(this).find('span').stop(true).animate({opacity: 0}, duration); $(this).find('img').stop(true).animate({top: '0px'}, duration); }); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/22 15:23