下記参考サイトの様に、
画像をマウスオーバーすると、
キャプションが現れるコンテンツを作成したいと考えております。
【 参考サイトURL 】
http://www.basicagency.com/
そこで、
このマウスオーバーでキャプションが表示され、
尚且つそのキャプションの中身は自由に文字や画像を入れれるように
したと思っております。
また配置する画像(マウスオーバーしていない状態の画像)は
様々なサイズでランダムに並べて使用したいと考えております。
※例
┏━━━━━━┓
┃ ┃
┃ 240×240 ┃
┃ ┃
┗━━━━━━┛
┏━━━━━━┓
┃ ┃
┃ 180×180 ┃
┃ ┃
┗━━━━━━┛
上記の様なコンテンツの作成方法を
ご存知の方はご返信をお待ちしております。
以上、宜しくお願いします!
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
このマウスオーバーでキャプションが表示され、
尚且つそのキャプションの中身は自由に文字や画像を入れれるように
こちらに関しては
外を囲うdivタグをposition:relative;に
中に入っているdivタグをposition:absolute;で外の要素にかぶせるように配置
中に入っているdivタグにアニメーションを指定(こうすることでcssのプロパティに変化があると勝手にアニメーションしてくれます)
参考サイトを見ると、中の文字なども動いていたのでそこにもアニメーションを指定
次にhoverした時のアクションを追加
中に入っているdivタグにhoverした時に背景の色を少し黒色にする
中に入っているdivタグにhoverした時にその中のコンテンツを上からちょっと下にずらす(上からの距離を開ける)
これをコードにしたのがコレです。
(わかりづらかったらごめんなさい!)
lang
1<div class="outer"> 2 <div class="inner"> 3 <div class="inner__poR"> 4 <div class="inner_content">textやimage</div> 5 </div> 6 </div> 7</div>
lang
1.outer{ 2 width: 200px; 3 height: 200px; 4 position: relative; 5} 6 7.inner{ 8 position: absolute; 9 top: 0; 10 left: 0; 11 width: 200px; 12 height: 200px; 13 background: transparent; 14 transition: all .5s ease; 15} 16 17.inner_poR{ 18 position: relative; 19 top: 0; 20 left: 0; 21 width: 200px; 22 height: 200px; 23} 24 25.inner_content{ 26 position: relative; 27 transition: all .5s ease; 28} 29 30.inner:hover{background: rgba(0,0,0,.5);} 31.inner:hover .inner_content{top: 10px;}
また、
また配置する画像(マウスオーバーしていない状態の画像)は
様々なサイズでランダムに並べて使用したいと考えております。
この質問なのですが、
参考サイトのレイアウトだったらfloatで全部行けると思います。
なぜなら規則正しいレイアウトだからです。
左側に小さい四角4つ分の大きい四角。
右側に小さい四角が4つ並んでいる。
ただ、画像の幅に応じてレイアウトを変えたいなど行ないたい場合は、javascriptを使用して調整するしかないです。
pinterest グリッド jqueryとかで調べるとそういうjsが出てくると思います!
参考になれば幸いです!
投稿2015/04/14 08:14
総合スコア1869
0
ベストアンサー
急いでに作ってしまったのでちょっとコード汚いですが、雰囲気が伝われば!(笑)
lang
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6.outer{ 7 width: 200px; 8 height: 200px; 9 position: relative; 10 border: solid 1px #999; 11 background: url(http://www.neko-kurashi.com/img/kao01.jpg); 12 background-size: cover; 13 background-position: center; 14} 15 16.inner{ 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 200px; 21 height: 200px; 22 background: transparent; 23 transition: all .5s ease; 24} 25 26.inner_poR{ 27 position: relative; 28 top: 0; 29 left: 0; 30 width: 200px; 31 height: 200px; 32} 33 34.inner_contents{ 35 position: relative; 36 opacity: 0; 37 width: 200px; 38 height: 200px; 39 transition: all .5s ease; 40} 41 42.u-poR{position: relative;} 43 44.animation{ 45 transition: all .5s ease; 46 -webkit-transition: all .5s ease; 47 -moz-transition: all .5s ease; 48 -ms-transition: all .5s ease; 49} 50 51.inner_content{ 52 position: absolute; 53 left: 0; 54 width: 100%; 55 height: 50px; 56 line-height: 50px; 57 color: #fff; 58 text-align: center; 59} 60 61.inner_content--top{top: 0;} 62.inner_content--bottom{ 63 background: #fff; 64 color: #999; 65 bottom: -10px; 66 text-decoration: none; 67} 68 69.inner:hover{background: rgba(0,0,0,.5);} 70.inner:hover .inner_contents{opacity: 1} 71.inner:hover .animation--top{top: 10px;} 72.inner:hover .animation--bottom{bottom: 0px;} 73 74.wrap-float div{float: left;} 75.wrap-float:after{ 76 display:block; 77 clear:both; 78 height:0px; 79 visibility:hidden; 80 content:"."; 81} 82 83.w50per{width: 50%;} 84.image-holder{ 85 display: inline-block; 86 margin-left: 10px; 87 margin-top: 10px; 88 width: 30px; 89 height: 30px; 90 background: url(http://www.neko-kurashi.com/img/kao01.jpg); 91 background-size: cover; 92 background-position: center; 93} 94</style> 95</head> 96<body> 97 <div class="outer"> 98 <div class="inner"> 99 <div class="inner__poR"> 100 <div class="inner_contents"> 101 <div class="u-poR animation animation--top inner_content inner_content--top"> 102 <div class="wrap-float"> 103 <div class="w50per"> 104 <div class="image-holder"></div> 105 <div class="image-holder"></div> 106 <div class="image-holder"></div> 107 <div class="image-holder"></div> 108 </div> 109 <div class="w50per"> 110 <div class="image-holder"></div> 111 <div class="image-holder"></div> 112 <div class="image-holder"></div> 113 <div class="image-holder"></div> 114 </div> 115 </div> 116 </div> 117 <div class="u-poR animation animation--bottom inner_content inner_content--bottom"><a href="#">猫の詳細はこちら</a></div> 118 </div> 119 </div> 120 </div> 121 </div> 122</body> 123</html>
これがhoverの前
![イメージ説明]WIDTH:600
これがhoverの後
![イメージ説明]WIDTH:600
こんな感じです!
ちなみにjavascriptのライブラリでtransit.jsやenqt.jsなど、cssアニメーションをjavascriptで簡単に制御出来る方法もあります。
ただ、こちらだと、hoverというアクション自体をjavascriptのhoverイベントで取る必要があります。
また、hoverを解除した時の処理とかを書く必要があるのでcssで書くことができれば最高だと思います。
参考になれば幸いです!
投稿2015/04/15 02:34
総合スコア1869
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/15 03:34
2015/04/15 05:08
2015/04/15 05:09
0
こんにちは。
下記のような記述でもお望みのエフェクトを得ることができます。
HTMLは共通です。なお、フォントサイズやカラーは記述してありませんので、お好みでCSSに追記してください。
lang
1<figure> 2 <img src="image.jpg" /> 3 <figcaption> 4 <h3>Caption Title</h3> 5 <p>caption text here ...</p> 6 <!— 小さな画像であれば、ここに記述すれば表示できます —> 7 </figcaption> 8</figure>
1)シンプルなタイプ(基本形)
lang
1figure { 2 position: relative; 3 overflow: hidden; 4 width: 300px; 5} 6figcaption { 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: 2; 11 width: 100%; 12 height: 100%; 13 background: rgba(0,0,0,.6); 14 -webkit-transition: .3s; 15 transition: .3s; 16 opacity: 0; 17} 18figure:hover figcaption { 19 opacity: 1; 20}
2)時間差でキャプションを表示(左からスライド)させるタイプ
lang
1figure { 2 position: relative; 3 overflow: hidden; 4 width: 300px; 5} 6figcaption { 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: 2; 11 width: 100%; 12 height: 100%; 13 background: rgba(0,0,0,.6); 14 -webkit-transition: .3s; 15 transition: .3s; 16 opacity: 0; 17} 18figcaption h3, 19figcaption p { 20 position: absolute; 21 left: -100%; 22 width: 260px; 23 -webkit-transition: .3s; 24 transition: .3s; 25} 26figcaption h3 { 27 top: 30px; 28} 29figcaption p { 30 top: 75px; 31} 32figure:hover figcaption { 33 opacity: 1; 34} 35figure:hover figcaption h3, 36figure:hover figcaption p { 37 left: 20px; 38} 39figure:hover figcaption h3 { 40 -webkit-transition-delay: .2s; 41 transition-delay: .2s; 42} 43figure:hover figcaption p { 44 -webkit-transition-delay: .5s; 45 transition-delay: .5s; 46}
以上、MasakazuFukamiさんのご回答とあわせて、ご参考いただければ幸いです。
投稿2015/04/15 02:06
退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/14 13:01
2015/04/14 13:05
2015/04/14 13:16
2015/04/15 02:08