-3
DIVコンテナの下に画像を追加するにはどうしたらいいですか？私は、写真の下に中心を置いて、ホバリング効果で動く、サイズが大きく、白い背景のようなテキストを追加したいと思います。また、ウェブページの右側に余分なスペースが残っているのはなぜですか？画像の下に画像を追加する
<!DOCTYPE html>
<head>
<title></title>
<body>
<style type="text/css">
#container {
width: 720px;
}
.panel {
float: left;
width: 200px;
height: 200px;
margin: 40px;
position: relative;
padding-bottom: 150px;
}
.panel .hover {
float: none;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
width: 200px;
height: 200px;
text-align: center;
-o-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-o-transition: all .3s;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
padding-bottom: 90px;
}
.panel .hover:hover {
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
\t padding-bottom: 90px;
}
</style>
<div class="panel"><div class="hover"><img src="B2.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="B2+.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="C1.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="C2.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="B2W.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="B2+W.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="C1W.jpg" width="110%" height="150%"></div></div>
<div class="panel"><div class="hover"><img src="C2W.jpg" width="110%" height="150%"></div></div>
</div>
</body></html>
私はその1を探していました。 :-Dこの場合は、ホバー効果をコンテナに適用し、テキストをサイズ変更する必要があります。 – GolezTrol
一番簡単な答えに疲れましたか？画像の後ろにテキストを追加しようとしましたか？ – j08691