ここでは、画像をセンター揃えにしてあります。
不要な場合は「margin: 0 auto;」を変更してください。
サンプルでは<div>タグを使用していますが、下記のようにPタグに使用してもOKです。
<p class="mo1"><img src="img/ph1.jpg" alt="スイーツ"></p>
01 画像を拡大
HTML
<div class="mo1"><img src="img/ph1.jpg" alt="スイーツ"></div>
CSS
.mo1{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
cursor: pointer;
}
.mo1 img{
width: 100%;
transition-duration: 0.5s;
}
.mo1:hover img{
transform: scale(1.2);
transition-duration: 0.5s;
}
HTML
画像にリンクを付ける場合
<div class="mo1"><a href="index.html" target="_blank"><img src="img/ph1.jpg" alt="スイーツ"></a></div>
02 画像を明るく
HTML
<div class="mo2"><img src="img/ph2.jpg" alt="森"></div>
CSS
.mo2{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
}
.mo2 img{
width: 100%;
cursor: pointer;
transition-duration: 0.3s;
}
.mo2:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}
03 画像を暗く
HTML
<div class="mo3"><img src="img/ph2.jpg" alt="森"></div>
CSS
.mo3{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.mo3 img{
width: 100%;
cursor: pointer;
transition-duration: 0.3s;
}
.mo3:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}
04 画像を少し傾けながら拡大
HTML
<div class="mo4"><img src="img/ph3.jpg" alt="バレエ"></div>
CSS
.mo4{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
}
.mo4 img{
width: 100%;
cursor: pointer;
transition-duration: 0.5s;
}
.mo4 img:hover{
transform: scale(1.2) rotate(9deg);
transition-duration: 0.5s;
}
05 画像を浮かせる
HTML
<div class="mo5"><img src="img/ph4.jpg" alt="海底"></div>
CSS
.mo5{
width: 300px;
height: 220px;
margin: 20px auto 0;
transition-duration: 0.5s;
}
.mo5 img{
width: 100%;
cursor: pointer;
}
.mo5:hover{
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
transform: translateY(-10px);
transition-duration: 0.5s;
}
06 画像のぼかしを消す
HTML
<div class="mo6"><img src="img/ph5.jpg" alt="平和"></div>
CSS
.mo6{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
}
.mo6 img{
width: 100%;
transform: scale(1.1);
cursor: pointer;
filter: blur(5px);
transition-duration: 0.5s;
}
.mo6 img:hover{
filter: blur(0);
transition-duration: 0.5s;
}
07 モノクロからカラー
HTML
<div class="mo7"><img src="img/ph6.jpg" alt="花"></div>
CSS
.mo7{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
}
.mo7 img{
width: 100%;
transform: scale(1.1);
cursor: pointer;
filter: grayscale(100%);
transition-duration: 0.5s;
}
.mo7 img:hover{
filter: grayscale(0);
transition-duration: 0.5s;
}
08 画像を横回転
HTML
<div class="mo8"><img src="img/ph7.jpg" alt="ハチ"></div>
CSS
.mo8{
width: 300px;
height: 220px;
margin: 0 auto;
overflow: hidden;
}
.mo8 img{
width: 100%;
cursor: pointer;
transition-duration: 0.5s;
}
.mo8:hover img{
transform: rotateY( 360deg );
transition-duration: 0.5s;
}
09 画像を回転
HTML
<div class="mo9"><img src="img/ph8.jpg" alt="子犬"></div>
※たて×よこサイズが同じ画像を使用してください。
CSS
.mo9{
width: 250px;
height: 250px;
margin: 0 auto;
overflow: hidden;
border-radius: 50%;
}
.mo9 img{
width: 100%;
cursor: pointer;
transition-duration: 0.5s;
}
.mo9 img:hover{
transform: rotate(360deg);
transition-duration: 0.5s;
}