【CSS】ホバーした時に画像が拡大する方法

hoverの時に画像がふわっと拡大する方法

【本日実装したいこと】

hoverの時に画像がふわっと拡大させたい！

その実装方法は２種類あります。

①imgタグで画像を表示する場合

 <div class="ImgBox">

  <img src="画像のパス" class="ImgBox-Img">

 </div>

.ImgBox{ 

width: 280px;

height: 200px;

overflow: hidden; 

} 

.ImgBox-Img{

 transition-duration: 0.3s; 

}

.ImgBox-Img:hover{ 

transform: scale(1.2);

transition-duration: 0.3s; 

}

さらに、若干暗くして拡大させるには？

.ImgBox{ 

width: 280px;

height: 200px;

overflow: hidden;

background: #000;/*これを追加！*/

} 

.ImgBox-Img{

 transition-duration: 0.3s; 

}

.ImgBox-Img:hover{ 

transform: scale(1.2); 

transition-duration: 0.3s; 

opacity: 0.6;/*これを追加！*/

}

②backgroundで画像を表示する場合

<div class="ImgBox">

<div class="ImgBox-Img" style="background: url('画像のパス') no-repeat center;backgruond-size:cover;">

</div>

</div>

.ImgBox{
  width: 320px;
  overflow: hidden;
  background: #000;
}
.ImgBox-Img{
  width: 100%;
  padding-top: 75%;
  transition-duration: .3s;
}
.ImgBox-Img:hover{
  transition-duration: .3s;
  transform: scale(1.2);
  opacity: .6;
}

これはウェブサイトでよく使うので、覚えちゃいましょう！

今日もお疲れ様でした。

1行追加で実現可能！画像を任意の位置でトリミングする方法

画像を任意の位置でトリミングする方法

【本日実装したいこと】

画像を任意の位置でトリミングしたい

その実装方法は

object-fit: cover;を追加するだけ！

.example {
  width: 250px;
  height: 250px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

画像のサイズは

縦横のうち小さい方を基準にして

自動的に拡大・縮小され、

ボックスからはみ出した部分はトリミングされる

という魔法のようなcssです！

中央以外の位置でトリミングしたい時は 

object-position プロパティーを設定します。

左上を基準にして、object-position: 横の位置 縦の位置; を記述すればOK。

以上で実装完了です。

※ただし、残念ながらこの便利な object-fit、object-position プロパティーはI

EとEdgeに対応していません。

IEとEdgeに対応するにはこちらのサイトを参考にしてみてください！

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

今日もお疲れ様でした。

【CSS】疑似要素の画像サイズを変更する方法

擬似要素の画像サイズを変更する

beforeやafterはwidth指定をしても変更されません。

.〇〇:before {
  content: url(../img/〇〇.png);
  display: inline-block;
  width: 100px;
  height: 100px;
}

【本日実装したいこと】

擬似要素の画像サイズを変更したい

その実装方法は

背景画像として表示させれば変更可能になります！

サルワカさんのサイトから使わせてもらいました！

【CSS】疑似要素の画像サイズを変更する方法

.〇〇:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../img/〇〇.png);
  background-size: contain;
  vertical-align: middle;
}

 

背景画像をレスポンシブにする方法

beforeとafterの2つの疑似要素を使います。

:beforebeforeはただスペースを作るだけの役割をしています。

padding-topには、画像の幅に対する高さの比率を指定します

（画像の縦横比が10:5の場合⇒width:50%ならheightは25%に）。

これで「%指定の幅×高さのスペース」が出来上がるわけです。

:after空いたスペースに画像を絶対配置（absolute）します。

widthにはさきほどbeforeで指定した幅と同じ値を入れ、

heightにはこれ以上画像が長くなることは無いだろうという値をpxで指定します。

絶対配置なのでどれだけ高さを大きくしても、

下に続く要素の位置には影響はありません。

background-repeat: no-repeat;とすることで、画像が1度だけ表示されます。

.example {
  position: relative;/*相対配置*/
}

.example:before {/*スペースを作る*/
  content: '';
  top: 0;
  left: 0;
  width: 100%;/*指定したい幅*/
  padding-top: 90%;/*画像の幅に対する高さ比率*/
  display: block;
}

.example:after {/*画像を絶対配置*/
  position: absolute;
  content: '';
  top: 0;
  left:0;
  display: block;
  width: 100%;/*幅*/
  height: 800px;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
  background-image: url(../img/face.png);
  background-size: contain;
  background-repeat: no-repeat;/*画像を繰り返さない*/
  }

以上で実装完了です。

今日もお疲れ様でした。

テキストにシャドウをCSSで付けるには？

CSSでテキストに影をつける方法

【本日実装したいこと】

テキストに影をつける

その実装方法は下記のサイトで解決します！

css-generator

GET CODEというボタンをクリックすると、cssのコードが現れます。

それをコピーして使用すればOK!

簡単すぎて、書くまでもないですが、

忘れないようにアウトプットしました。

以上で実装完了です。

今日もお疲れ様でした。

超簡単！CSSでBackground-image(背景画像)を透過させる【コーディング編】

CSSでBackground-image(背景画像)を透過させる

img要素やdiv要素であればopacityで可能ですが、

background-imageにはOpacityが適用されません！

【本日実装したいこと】

CSSのBackground-imageを透過させたい

下の背景画像のようなイメージ

その実装方法はcssに下記を記載するだけ！

background-image:("〇〇.jpg"); 

background-color:rgba(255,255,255,0.8); 

background-blend-mode:lighten;

以上で実装完了です。

今日もお疲れ様でした。