1

サイトに画像を並べて表示しようとしています。画像の上にカーソルを合わせると、グラデーションとプロジェクトの名前を説明するテキストが表示されます。私はフィギュアとフィグキャプションを使ってこれを試みてきましたが、多くの進歩を遂げましたが、いくつかのことを理解することはできません.

1) キャプションを画像の上にのみ表示する方法 (現在は画像の上に表示されますが、CSS がないとテキストが表示される空白のスペースがあります)

2）画像を並べて配置する方法、現在は均等に表示されていません。

3) ホバー時にのみキャプション テキストを表示する方法

私のサイトはこちらです。図はページの下部にあります: http://example4.inivex.com

ここに私のCSSがあります:

.test a {
position: relative;
display: inline-block;
border: 1px solid;
/*float:left;*/
width:300px;
height:240px;
margin:5px;
}

.test a:hover:before {
content: '';
display: block;
border: 0px solid;
background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
width: 300px;
height: 240px;
position: absolute;
top: 0;
right: 0;
}

figure {
float:left;
width:300px;
height:240px;
margin:5px;
}

.test figcaption {
position: relative;
top: -30px;
left: 15px;
}

そして、これがページ上の私のHTMLです：

<h3 style= "text-align: center;">Our Work</h3>
<br><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img         src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300"     height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br>
4

1 に答える 1

2

どうぞ...

コードペンデモ

HTML

あなたの投稿として、ラッパーdivを追加してブレークタグを取り出しました

CSS

.wrapper {
  text-align:center;
}

figure {
  display: inline-block;
  border:1px solid grey;
  position: relative;
  overflow:hidden;
}

figure a {
  display: block;
}

figure:hover:before {
  content: '';
  display: block;
  background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

figcaption {
  position: absolute;
  height:50px;
  line-height:50px;
  background-color: grey;
  bottom:-50px;
  width:100%;
  transition: bottom 0.5s ease;
}

figure:hover figcaption {
  bottom:0;
}
于 2014-02-07T22:09:02.017 に答える