この div レイアウトをカーソルに反応するように設定し、ホバーするまでフォントが非表示になるように後で変更することを計画していましたが、div 内のテキストを使用して水域をテストしているので、div の約スペースにポップアップします自体。ここにCSSがあります..
-css-
@charset "utf-8";
/* CSS Document */
body {
background:#000;
}
.grid_0 {
width:100%;
height:100%;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
background:#000000;
max-width:1000px;
padding:auto;
margin:auto;
vertical-align:top;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9
{
width:30%;
height:30%;
margin:.5% .5%;
max-width:300px;
max-height:300px;
min-width:250px;
min-height:250px;
overflow:hidden;
display:inline-block;
}
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9{
background: rgba(51,51,51,1);
}
.grid_5:hover,.grid_9:hover {
background: rgba(0,153,204,1);
transition-property: background;
}
.grid_2:hover,.grid_6:hover,.grid_7:hover{
background: rgba(51,204,51,1);
transition-property: background;
}
.grid_3:hover,.grid_4:hover,.grid_8:hover{
background: rgba(102,204,153,1);
transition-property: background;
}
.img{
width:100%;
}
.container {
width:1000px;
height:1000px;
vertical-align:top;
}
strong {
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
color: rgba(51,51,51,1);
}
html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid_0">
<div class="grid_1">
<img class="img" src="img/b2logo.png">
</div>
<div class="grid_2">
<p>
hello
</p>
</div>
<div class="grid_3">
<p>
hello
</p>
</div>
<div class="grid_4">
</div>
<div class="grid_5">
</div>
<div class="grid_6">
</div>
<div class="grid_7">
</div>
<div class="grid_8">
</div>
<div class="grid_9">
</div>
</div>
</body>
</html>