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

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

ただいまの
回答率

88.04%

コンテンツの作成方法

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,595

score 49

下記参考サイトの様に、
画像をマウスオーバーすると、
キャプションが現れるコンテンツを作成したいと考えております。

【 参考サイトURL 】
http://www.basicagency.com/


そこで、
このマウスオーバーでキャプションが表示され、
尚且つそのキャプションの中身は自由に文字や画像を入れれるように
したと思っております。

また配置する画像(マウスオーバーしていない状態の画像)は
様々なサイズでランダムに並べて使用したいと考えております。

※例
┏━━━━━━┓
┃    ┃
┃ 240×240   ┃
┃    ┃
┗━━━━━━┛
┏━━━━━━┓
┃    ┃
┃ 180×180   ┃
┃    ┃
┗━━━━━━┛

上記の様なコンテンツの作成方法を
ご存知の方はご返信をお待ちしております。

以上、宜しくお願いします!
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

このマウスオーバーでキャプションが表示され、 
尚且つそのキャプションの中身は自由に文字や画像を入れれるように 

こちらに関しては
外を囲うdivタグをposition:relative;に
中に入っているdivタグをposition:absolute;で外の要素にかぶせるように配置
中に入っているdivタグにアニメーションを指定(こうすることでcssのプロパティに変化があると勝手にアニメーションしてくれます)
参考サイトを見ると、中の文字なども動いていたのでそこにもアニメーションを指定
次にhoverした時のアクションを追加
中に入っているdivタグにhoverした時に背景の色を少し黒色にする
中に入っているdivタグにhoverした時にその中のコンテンツを上からちょっと下にずらす(上からの距離を開ける)
これをコードにしたのがコレです。
(わかりづらかったらごめんなさい!)

<div class="outer">
  <div class="inner">
    <div class="inner__poR">
      <div class="inner_content">textやimage</div>
    </div>
  </div>
</div>
.outer{
  width: 200px;
  height: 200px;
  position: relative;
}

.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: transparent;
  transition: all .5s ease;
}

.inner_poR{
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.inner_content{
  position: relative;
  transition: all .5s ease;
}

.inner:hover{background: rgba(0,0,0,.5);}
.inner:hover .inner_content{top: 10px;}


また、
また配置する画像(マウスオーバーしていない状態の画像)は 
様々なサイズでランダムに並べて使用したいと考えております。

この質問なのですが、
参考サイトのレイアウトだったらfloatで全部行けると思います。
なぜなら規則正しいレイアウトだからです。
左側に小さい四角4つ分の大きい四角。
右側に小さい四角が4つ並んでいる。

ただ、画像の幅に応じてレイアウトを変えたいなど行ないたい場合は、javascriptを使用して調整するしかないです。
pinterest グリッド jqueryとかで調べるとそういうjsが出てくると思います!


参考になれば幸いです!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/04/14 22:01

    回答頂きありがとうございます!!!

    CSSだけでこんな事ができるなんて、
    とても感動です!

    1点分からない部分があるのですが、
    ご回答頂きましたコードを実際に試していたのですが、
    マウスオーバーする前はキャプションが非表示で、
    マウスオーバーした際に、キャプションが表示されるようにしたい場合は、
    どのように修正すれば宜しいでしょうか??

    またリンクを貼りたい場合は、
    どのように修正すればいいかという点も併せてご回答頂けましたら幸いです。

    私がしたい事としては、
    下記の図の様に■の部分には別の小さい画像を並べ、
    その下の「詳細はこちら」を押すと
    専用のページへ飛ぶといったものを作成したいと考えております。
    ┏━━━━━━━━━━━━┓
    ┃ ■■  ■■  ■■ ┃
    ┃ ■■  ■■  ■■ ┃
    ┃ ■■  ■■  ■■ ┃
    ┃ ■■  ■■  ■■ ┃
    ┃            ┃
    ┃   詳細はこちら   ┃
    ┗━━━━━━━━━━━━┛

    ※参考の図が崩れておりましたら、すいません。。。

    キャンセル

  • 2015/04/14 22:05

    ちょっと待って下さいね!
    実際に表示せずに書いてしまったので家に帰ってから書いてみます!

    キャンセル

  • 2015/04/14 22:16

    大変お忙しい中申し訳ございません。。。

    ご返事お待ちしております!!

    キャンセル

  • 2015/04/15 11:08

    すいません!きのう寝ちゃってました!いまから書きます!

    キャンセル

checkベストアンサー

0

急いでに作ってしまったのでちょっとコード汚いですが、雰囲気が伝われば!(笑)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.outer{
  width: 200px;
  height: 200px;
  position: relative;
  border: solid 1px #999;
  background: url(http://www.neko-kurashi.com/img/kao01.jpg);
  background-size: cover;
  background-position: center;
}

.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: transparent;
  transition: all .5s ease;
}

.inner_poR{
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.inner_contents{
  position: relative;
  opacity: 0;
  width: 200px;
  height: 200px;
  transition: all .5s ease;
}

.u-poR{position: relative;}

.animation{
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
}

.inner_content{
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
}

.inner_content--top{top: 0;}
.inner_content--bottom{
  background: #fff;
  color: #999;
  bottom: -10px;
  text-decoration: none;
}

.inner:hover{background: rgba(0,0,0,.5);}
.inner:hover .inner_contents{opacity: 1}
.inner:hover .animation--top{top: 10px;}
.inner:hover .animation--bottom{bottom: 0px;}

.wrap-float div{float: left;}
.wrap-float:after{
  display:block;
  clear:both;
  height:0px;
  visibility:hidden;
  content:".";
}

.w50per{width: 50%;}
.image-holder{
  display: inline-block;
  margin-left: 10px;
  margin-top: 10px;
  width: 30px;
  height: 30px;
  background: url(http://www.neko-kurashi.com/img/kao01.jpg);
  background-size: cover;
  background-position: center;
}
</style>
</head>
<body>
  <div class="outer">
    <div class="inner">
      <div class="inner__poR">
        <div class="inner_contents">
          <div class="u-poR animation animation--top inner_content inner_content--top">
            <div class="wrap-float">
              <div class="w50per">
                <div class="image-holder"></div>
                <div class="image-holder"></div>
                <div class="image-holder"></div>
                <div class="image-holder"></div>
              </div>
              <div class="w50per">
                <div class="image-holder"></div>
                <div class="image-holder"></div>
                <div class="image-holder"></div>
                <div class="image-holder"></div>
              </div>
            </div>
          </div>
          <div class="u-poR animation animation--bottom inner_content inner_content--bottom"><a href="#">猫の詳細はこちら</a></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

これがhoverの前
イメージ説明
これがhoverの後
イメージ説明
こんな感じです!

ちなみにjavascriptのライブラリでtransit.jsやenqt.jsなど、cssアニメーションをjavascriptで簡単に制御出来る方法もあります。
ただ、こちらだと、hoverというアクション自体をjavascriptのhoverイベントで取る必要があります。
また、hoverを解除した時の処理とかを書く必要があるのでcssで書くことができれば最高だと思います。

参考になれば幸いです!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/04/15 12:26

    MasakazuFukamiさん

    先日からお忙しい中、
    本当にありがとうございます!!!

    またわからない点があれば、
    こちらへ投稿させて頂きます!

    キャンセル

  • 2015/04/15 12:34

    いえいえ!

    また見つけたら回答させていただきます!
    もしよろしければベストアンサーお願い致します(笑)
    僕が勝手に喜びます(笑)

    キャンセル

  • 2015/04/15 14:08

    今後ともよろしくお願い致します!!

    ベストアンサーしました!!(笑)

    キャンセル

  • 2015/04/15 14:09

    ありがとうございます!
    泣いて喜びました!(笑)

    キャンセル

0

こんにちは。

下記のような記述でもお望みのエフェクトを得ることができます。
HTMLは共通です。なお、フォントサイズやカラーは記述してありませんので、お好みでCSSに追記してください。

<figure>
    <img src="image.jpg" />
    <figcaption>
        <h3>Caption Title</h3>
        <p>caption text here ...</p>
        <!— 小さな画像であれば、ここに記述すれば表示できます —>
    </figcaption>
</figure>

1)シンプルなタイプ(基本形)

figure {
    position: relative;
    overflow: hidden;
    width: 300px;
}
figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
}
figure:hover figcaption {
    opacity: 1;
}

2)時間差でキャプションを表示(左からスライド)させるタイプ

figure {
    position: relative;
    overflow: hidden;
    width: 300px;
}
figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
}
figcaption h3,
figcaption p {
    position: absolute;
    left: -100%;
    width: 260px;
    -webkit-transition: .3s;
    transition: .3s;
}
figcaption h3 {
    top: 30px;
}
figcaption p {
    top: 75px;
}
figure:hover figcaption {
    opacity: 1;
}
figure:hover figcaption h3,
figure:hover figcaption p {
    left: 20px;
}
figure:hover figcaption h3 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
figure:hover figcaption p {
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

以上、MasakazuFukamiさんのご回答とあわせて、ご参考いただければ幸いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/04/15 12:28

    GeorgeCohtaさん

    こういう方法もあるのですね♪

    勉強になります!

    こちらもわからない点があれば、
    投稿させて頂きます!

    ありがとうございました!

    キャンセル

  • 2015/04/15 13:44

    mikioさん、コメント(返信)をいただきありがとうございます。
    ホバーエフェクトの基本形ということで書かせていただきました。
    細かいところはてきとうに改変してください。

    キャンセル

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

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

関連した質問

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