css3、hoverしたら画像ぴったりにキャプションを表示する方法

300x300の画像の上にhoverすると画像上にぴったりキャプションを表示させたいです。
ulのwidth、heightには.column imgのmargin:10px;を加味して、320pxにしています。
それが原因して、キャプションがulの320px分に広がってしまいます。
この場合どうすれば画像の300pxぴったりに表示できるのでしょうか？
画像にposition:relative;を設定したもののうまくいきませんでした。
アドバイスいただけると助かります。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="utf-8">
5<title>キャプション</title>
6<link rel='stylesheet' href='css/style2.css'>
7</head>
8
9<body>
10 <div class='column'>
11 <ul>
12 <li id='figure'>
13  <a href='#'>
14  <img src="img/pict300x300.png">
15   <div id='cap1'>
16    <h3>タイトル</h3>
17    <p>テキストテキスト</p>
18   </div>
19  </a>
20 </li><!--#figure-->
21 </ul>
22 </div><!--.column-->
23</body>
24</html>

css
1@charset "utf-8";
2html,body,ul,li,p,h3{
3 padding:0;
4 margin:0;
5}
6
7ul{list-style:none;}
8a{text-decoration:none;}
9.column img{
10  float:left;
11  margin:10px;
12}
13ul{
14  width:320px;
15  height: 320px;
16  overflow:hidden;
17  margin:0 auto;
18  }
19ul li#figure{
20  display: block;
21  position: relative;
22  overflow: hidden;
23  padding:0;
24  margin:0;
25  width: 300px;/*画像の幅と同じ*/
26}
27#cap1 {
28  position: absolute;
29  left:0;
30  bottom:-100%;
31  z-index: 2;
32  width: 100%;
33  height: 100%;
34  background: rgba(0,0,0,0.3);
35  transition: 1s;
36  -webkit-transition: .3s;
37  opacity: 0;
38}
39ul li#figure a:hover #cap1 {
40  position:absolute;
41  opacity: 1;
42  bottom:0;
43}

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

回答2件

ベストアンサー

CSS
1ul li#figure {
2    display: block;
3    margin: 0;
4    overflow: hidden;
5    padding: 0;
6    position: relative;
7    /*width: 300px; 消す*/
8}
9ul li#figure a:hover #cap1 {
10    bottom: 10px; /* margin分 */
11    opacity: 1;
12    position: absolute;
13}
14#cap1 {
15    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
16    bottom: -100%;
17    height: calc(100% - 20px); /* margin分 */
18    height: 300px; /* 値が固定ならピクセル指定 */
19    left: 10px; /* margin分 */
20    opacity: 0;
21    position: absolute;
22    transition: all 0.3s ease 0s;
23    width: calc(100% - 20px); /* margin分 */
24    width: 300px; /* 値が固定ならピクセル指定 */
25    z-index: 2;
26}

投稿2017/01/14 11:03

kei344

総合スコア69407

roronoazoro

2017/01/14 14:47

コメントアウトまでしていただきありがとうございます。無事に解決いたしました。

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

id="cap1"にmarginをかけることで質問者さんのいうような動作になると思います。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>キャプション</title>
6    <style type="text/css">
7        html, body, ul, li, p, h3 {
8            padding: 0;
9            margin: 0;
10        }
11
12        ul {
13            list-style: none;
14        }
15
16        a {
17            text-decoration: none;
18        }
19
20        .column img {
21            float: left;
22            margin: 10px;
23        }
24
25        ul {
26            width: 320px;
27            height: 320px;
28            overflow: hidden;
29            margin: 0 auto;
30        }
31
32        ul li#figure {
33            display: block;
34            position: relative;
35            overflow: hidden;
36            padding: 0;
37            margin: 0;
38            width: 320px; /*画像の幅と同じ*/
39        }
40
41        #cap1 {
42            position: absolute;
43            left: 0;
44            bottom: -100%;
45            z-index: 2;
46            width: 300px;
47            height: 300px;
48            margin: 10px;
49            background: rgba(0, 0, 0, 0.3);
50            transition: 1s;
51            -webkit-transition: .3s;
52            opacity: 0;
53        }
54
55        ul li#figure a:hover #cap1 {
56            position: absolute;
57            opacity: 1;
58            bottom: 0;
59        }
60    </style>
61</head>
62
63<body>
64<div class='column'>
65    <ul>
66        <li id='figure'>
67            <a href='#'>
68                <img src="https://placehold.jp/300x300.png">
69                <div id='cap1'>
70                    <h3>タイトル</h3>
71                    <p>テキストテキスト</p>
72                </div>
73            </a>
74        </li><!--#figure-->
75    </ul>
76</div><!--.column-->
77</body>
78</html>