前提・実現したいこと
サイトからHTMLとCSSをコピペして画像にホバーエフェクトを付けたのですが
初心者すぎて、どこに何を記述すれば横並びになるのかわかりません。
ちなみにここのサイト[http://photoshopvip.net/88174]の上から7個目の「マウスホバーで、線ラインを伸縮表示。」を参考にしています。
発生している問題・エラーメッセージ
画像が重なってしまいます… 【HTML】 <figure class="snip1229"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample84.jpg" alt="sample84"/> <figcaption> <div class="heading"> <h3>Brian <span> Cumin</span></h3> </div> <p>I think we dream so we don't have to be apart so long. If we're in each other's dreams, we can play together all night</p> </figcaption> <a href="#"></a> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample84.jpg" alt="sample84"/> <figcaption> <div class="heading"> <h3>Brian <span> Cumin</span></h3> </div> <p>I think we dream so we don't have to be apart so long. If we're in each other's dreams, we can play together all night</p> </figcaption> <a href="#"></a> </figure> 【CSS】 figure.snip1229 { position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; color: #ffffff; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } figure.snip1229 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } figure.snip1229 img { max-width: 100%; position: relative; opacity: 0.9; } figure.snip1229 figcaption { position: absolute; top: 9%; left: 7%; right: 7%; bottom: 80%; border: 1px solid white; border-width: 0 1px 1px; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } figure.snip1229 .heading { overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); } figure.snip1229 h3 { display: table; margin: 0 auto; padding: 0 10px; position: relative; text-align: center; width: auto; text-transform: uppercase; font-weight: 400; } figure.snip1229 h3 span { font-weight: 800; } figure.snip1229 h3:before, figure.snip1229 h3:after { position: absolute; display: block; width: 1000%; height: 1px; content: ''; background: white; top: 50%; } figure.snip1229 h3:before { left: -1000%; } figure.snip1229 h3:after { right: -1000%; } figure.snip1229 p { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 100%; padding: 0 20px; margin: 0; opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip1229 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip1229:hover img, figure.snip1229.hover img { opacity: 0.15; -webkit-transform: scale(1.1); transform: scale(1.1); } figure.snip1229:hover figcaption, figure.snip1229.hover figcaption { top: 9%; bottom: 9%; -webkit-transition-delay: 0s; transition-delay: 0s; } figure.snip1229:hover p, figure.snip1229.hover p { opacity: 1; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
該当のソースコード
試したこと
何を試したらいいのかわかりません…
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー