【CSS3】で写真に色々装飾を加えてみた(hoverしたときのエフェクトを作る【IE9以前は非推奨】
：【CSS3】で写真をhoverしたときのエフェクトを作る【IE9以前は非推奨】 おはこんばんちわ、あなたのわた [...]
【CSS3】で写真をhoverしたときのエフェクトを作る【IE9以前は非推奨】
おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)ﾉ
CSS3とかで写真に装飾つけるシリーズも第三回となりました。
今回はhover時のエフェクトを付けてみようとおもいます。
CSSで作るので、例のごとくレガシーブラウザ(IEとかIEとかIEのIE9以前)には未対応なのですが・・・
使う場面があることを信じて、作っていくのです。
それでは今回もブランケットに包まるさんにご登場していただきましょう。
widthは300pxにしてあり、box-sizingと枠を追加しています。
枠は今回paddingではなく、エフェクトの影響を避けるためborderで白枠をとっています。
境界線はbox-shadowで作っています。
また、今回はエフェクトがはみ出ないようoverflow:hidden;をかけています。
<style>
.img01 {
position:relative;
overflow:hidden;/* はみ出し防止 */
width:300px;
margin:0 auto;
box-sizing:border-box;/* borderとpaddingをwidthに含める */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
}
.waku01{
border:7px solid #fff;
box-shadow: 0 0 1px 0 #aaa; /* 枠の外の境界線 */
}
.img01 img {
width:100%;
height:auto;
vertical-align:top;
}
</style>
<p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
では、まずは簡単にマスクをかけたようなエフェクトを作ってみます。
<style>
.anime01:before {
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0;
cursor:pointer;
-webkit-transition:all 0.3s linear;/* all(変化させたい要素) 0.3s(変化する早さ) linear(変化の動き:linearは一定の早さ) */
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.anime01:hover:before {
opacity:0.3;
}
</style>
<p class="img01 waku01 anime01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
次にふんわりとフォーカスしたようなエフェクトを作ってみます。
<style>
.anime02:before {
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
opacity:0;
cursor:pointer;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.anime02:hover:before {
opacity:1;
}
</style>
<p class="img01 waku01 anime02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
ベタのマスクを乗っけるよりも、こっちのほうがおしゃれにみえますね。
※ やのっぱさんのちょっとした豆知識(´・ω・｀)ﾏﾒﾖｰ
今回、ソースを見ていただくとわかるように、擬似要素に擬似クラスを振っています。
擬似要素とは:beforeとか:afterで、擬似クラスとは:hoverとか:activeとか:first-childとかですね。
で、こちらを組み合わせるときには順番に決まりがありますのでご注意です。
要素＋擬似クラス＋擬似要素の順番に記述しないと動作しません。
たとえば、.test:before:hoverではなく、.test:hover:beforeという順番で記述します。
擬似擬似コンビは使い勝手良いのですが、こういう決まり事があるので覚えておくと良いと思います(´・ω・｀)ｂ
次にちょっと余計な動きを入れてみました。
目にうるさいのでおすすめはしませんが、このような動きも付けることができます。
中央で回転
<style>
.anime03:before {
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
border-radius:100%;
opacity:0;
cursor:pointer;
-webkit-transform: rotate(180deg) scale(0);/* 要素を回転表示させる scale：拡大縮小値 */
transform: rotate(180deg) scale(0);
-webkit-transition:all .3s linear;
transition:all .3s linear;
}
.anime03:hover:before {
border-radius:0%;
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
}
</style>
<p class="img01 waku01 anime03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
横にくるっとする
<style>
.anime04:before {
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
opacity:0;
cursor:pointer;
-webkit-transform: rotateY(180deg);/* Y軸方向へ回転 */
transform: rotateY(180deg);
-webkit-transition:all .3s linear;
transition:all .3s linear;
}
.anime04:hover:before {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity:1;
}
</style>
<p class="img01 waku01 anime04"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
縦もできちゃう
<style>
.anime05:before {
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
opacity:0;
cursor:pointer;
-webkit-transform: rotateX(180deg);/* X軸方向へ回転 */
transform: rotateX(180deg);
-webkit-transition:all .3s linear;
transition:all .3s linear;
}
.anime05:hover:before {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity:1;
}
</style>
<p class="img01 waku01 anime05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
外からふわっと
<style>
.anime06:before {
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
opacity:0;
cursor:pointer;
-webkit-transform: scale(5);
transform: scale(5);
-webkit-transition:all .4s ease;
transition:all .4s ease;
-webkit-transform: scale(1);
transform: scale(1);
}
.anime06:hover:before {
-webkit-transform: scale(1);
transform: scale(1);
opacity:1;
}
</style>
<p class="img01 waku01 anime06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
このように、擬似要素にtransitionやtransformを加えることで色々な動きを作ることができます。
行き過ぎたエフェクトは目にうるさく、ごちゃっとした印象になってしまいますが、さり気なくつけると、おっ！おしゃれっ！と言った感じになりますね。
ポイントはやり過ぎない、これです(´・ω・｀)ﾀﾞﾒﾖｰﾀﾞﾒﾀﾞﾒ
ほとんどがtransitionとtransformの使い方のようになりましたが、hover時のエフェクトのお話でした(´・ω・｀)ﾉｼ