http://www.nxworld.net/tips/css-only-caption-effect.html
上記サイトの「10.マスクとキャプションの表示タイミングをずらす」を取り入れようとしています。
.page-index .entry:hoverで
背景画像が設定された「続きを読む」の上に
.page-index .section を表示させようとしているのですが、上手くいきません。
jquery、CSS どちらでの解決でも構いません。
ご教授頂けると幸いです。
補足に現在のCSS該当部分を残します。
宜しくお願い致します。
url:http://nuruta.hatenablog.com/
トップページで適用を考えています。
こんな感じでいけるんじゃないかと。
スタイルシートに以下を追加します(transition まわりを使う際に追加した部分は消しておいた方が良いかと)。
.page-index .entry-content { position: relative; overflow: hidden; } .page-index .entry-content .section { position: absolute; left: -100%; width: 260px; transition: .3s; z-index: 4; color: white; } .page-index .entry-see-more { z-index: 2; } .page-index .entry-see-more-cover { position: absolute; width: 320px; height: 112px; } .page-index .entry-see-more-cover.cover-1.dark { background: rgba(0,0,0,0.6); transition: 0.2s; } .page-index .entry-see-more-cover.cover-1 { z-index: 3; } .page-index .entry-see-more-cover.cover-2 { z-index: 5; } /* .section に指定してある、display: none; を削除すれば、これは必要ない */ .page-index .entry-content .section { display: block !important; } /* 「続きを読む」の文字を消しておく */ .page-index .entry-see-more { color: transparent; }
最後のふたつのルールは、キャプションが流れ込んでくる仕組みの本質とは関係ありません。
で、javascript に以下を追加。
$(function() { $('.entry-see-more').before("<div class='entry-see-more-cover cover-1'></div><div class='entry-see-more-cover cover-2'></div>").each(function() { $('.cover-2', this.parentNode).hover( function(){ $(".cover-1", this.parentNode).addClass("dark"); $(".section", this.parentNode).animate({'left':'20px'},300); }, function () { $(".cover-1", this.parentNode).removeClass("dark"); $(".section", this.parentNode).animate({'left':'-100%'},300); } ); }); });
CSS だけでも行けそうな気もしますが、jQuery 使っちゃいました。
動作を確認してみて、タイミングや色合い、元々の .section 配下の要素に指定してあるスタイルの調整なんかをすれば良いかなと。
.page-index .entry-content { position: relative; overflow: hidden; } .page-index .entry-content .section { position: absolute; width: 320px; height: 112px; transition: .2s; z-index: 4; color: white; background-color: rgba(0,0,0,0.6); transition: 0.3s; opacity: 0; } .page-index .entry-content .section h4, .page-index .entry-content .section p { position: relative; left: -100%; transition-delay: 0.3s; } .page-index .entry-see-more { z-index: 2; } .page-index .entry-content .section:hover h4, .page-index .entry-content .section:hover p { left: 0px; padding-left: 20px; } .page-index .entry-content .section:hover h4 { transition-duration: 0.2s; } .page-index .entry-content .section:hover p { transition-duration: 0.3s; } .page-index .entry-content .section:hover { opacity: 1; } /* .section に指定してある、display: none; を削除すれば、これは必要ない */ .page-index .entry-content .section { display: block !important; } /* 「続きを読む」の文字を消しておく */ .page-index .entry-see-more { color: transparent; }
/*********************************************************/ /* toppage部 */ /*********************************************************/ /* 各ブログ記事 */ .page-index .entry { width: 49%; /* 50%で2カラム、25%で4カラム */ height:350px; display: inline-block; vertical-align: top; font-size: 1rem; box-sizing: border-box; border: none; /* お好みでborderを消す */ margin-bottom:10px; } .page-index .entry-title { font-weight: bold; font-size: 20px; padding: 5px; width:99%; height:100%; } /* 各ブログ記事 */ .page-index .entry-inner { display: table; } .page-index .entry:hover { background: #ecf9fb; border-bottom: 2px solid #007bc3; } /* 日付、ブログタイトル、カテゴリの親要素 */ .page-index .entry-header { display: table-footer-group; } .page-index .entry-see-more { margin-top: 0; margin-bottom: 24px; position: relative; display: block; width: 300px; height: 100px; line-height: 120px; text-align: left; text-decoration: none; font-weight:bold; font-size:30px; position: relative; color: #f00; background:#fff; border: 2px solid #4784bf; z-index:2; overflow: hidden; transition: 0.2s; background-position:20% 30%; background-repeat: no-repeat; background-size:cover; text-indent:100%; white-space:nowrap; } .page-index .categories { position:absolute; top:110px; } .page-index .section , .page-index .entry-footer, .page-index .comment-box { display: none; } @media only screen and (max-width: 700px) { .page-index .entry { width: 100%; } }
質問文を編集しました。詳細はこちら。