配列から出力したサイズ不明の画像全てにマウスオーバー時のキャプションを表示させる方法

配列に入っているサイズ不明の画像全てにマウスオーバー時のキャプションを表示させたいのですが方法がわかりませんどなたかお助けください
キャプションのイメージは画像にカーソルを合わせた時に下から少しだけ出てくるようなものです

//追記
$imageにはTwitterAPIで集めてきた画像が入っていて、マウスオーバー時のキャプションというものは、画像にカーソルを合わせた際に半透明の説明文のようなものがスライドして表示されるものを考えています。

PHP
1foreach($result as $image)
2{
3     echo "<img src = $image >";                    
4}

Lhankor_Mhy

2017/06/03 04:55

キャプションはどこに入っているのですか？

行動規範の内容に同意します

回答2件

ベストアンサー

こういうこと？

HTML
1<figure><img src="https://placehold.jp/24/cc9999/993333/350x150.png" alt=""><figcaption>caption</figcaption></figure>
2<figure><img src="https://placehold.jp/24/cc9999/993333/150x150.png" alt=""><figcaption>caption</figcaption></figure>
3<figure><img src="https://placehold.jp/24/cc9999/993333/50x150.png" alt=""><figcaption>caption</figcaption></figure>
4<figure><img src="https://placehold.jp/24/cc9999/993333/350x50.png" alt=""><figcaption>caption</figcaption></figure>
5<figure><img src="https://placehold.jp/24/cc9999/993333/350x250.png" alt=""><figcaption>caption</figcaption></figure>
6<figure><img src="https://placehold.jp/24/cc9999/993333/350x750.png" alt=""><figcaption>caption</figcaption></figure>

CSS
1figure {
2	display: inline-block;
3	margin: .5em;
4	overflow: hidden;
5	position: relative;
6}
7figure > img {
8	display: block;
9}
10figure > figcaption {
11	background-color: rgba(10,10,10,.5);
12	color: #fff;
13	display: block;
14	position: absolute;
15	bottom: 0;
16	left: 0;
17	right: 0;
18	padding: .5em;
19	text-align: center;
20	-webkit-transform: translate(0, 100%);
21	transform: translate(0, 100%);
22	-webkit-transition: all .2s ease-in-out 0s;
23	transition: all .2s ease-in-out 0s;
24}
25figure:hover figcaption {
26	-webkit-transform: translate(0, 0);
27	transform: translate(0, 0);
28	-webkit-transition: all .5s ease-in-out 0s;
29	transition: all .5s ease-in-out 0s;
30}
31```**動くサンプル：**[https://jsfiddle.net/b2o6ecp6/](https://jsfiddle.net/b2o6ecp6/)