<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
html, body, div{
margin: 0;
padding: 0;
line-height:1.0;
font-family: "游ゴシック", YouGothic, sans-serif;
/*reset
---------------------------------------------------*/
}
#wrapper{
width: 1000px;
margin: 30px auto;
background: #FFFFFF;
overflow: hidden;
padding: 30px 0 30px 0;
}
#wrapper .img{
float: left;/*一括指定して流し込み*/
}
.imgA{
width: 450px;/*floatするときはワイドを指定*/
margin:0 40px 0 30px;
}
.imgA a:hover{
opacity: 0.5;
}
.imgB{
background:url(img/bobdylan.jpg) no-repeat left top;
}
.imgB a{
display: block;
width: 450px;
height: 450px;/*サイズを指定しないと文字の大きさしかない*/
}
.imgB a:hover{
background: rgba(255, 255, 255, 0.5);
}</style>
</head><body>
<div id="wrapper">
<div class="img imgA"><a href="#"><img src="img/bobdylan.jpg" width="450" height="450" alt="bob"></a></div>
<div class="img imgB"><a href="#">imgB</a></div>
</div>
</body>
</html>
