今回はCSSだけで作るobject-fit:coverとoverflow: hidden滑らかな画像アニメーションをご紹介。簡単です。滑らかに動きます。画像一覧画面を作る際に役立ちます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのアニメーション/エフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
【CSSだけ】object-fit:coverとoverflow: hidden滑らかな画像アニメーション
1. 画像背景に【filter+linear gradient】で美しいCSSエフェクト
まずはアニメーションの動作から確認していきましょう
アニメーション動作の確認
動きは下の画像のような感じになります
実際の動きはこちら
コードの確認
<div class="images">
<!-- 画像と文字を6コ置く -->
<div class="image">
<img src="https://source.unsplash.com/1000x800">
<span>What Is It?</span>
</div>
<div class="image">
<img src="https://source.unsplash.com/1000x801">
<span>What Is It?</span>
</div>
<div class="image">
<img src="https://source.unsplash.com/1000x802">
<span>What Is It?</span>
</div>
<div class="image">
<img src="https://source.unsplash.com/1000x803">
<span>What Is It?</span>
</div>
<div class="image">
<img src="https://source.unsplash.com/1000x804">
<span>What Is It?</span>
</div>
<div class="image">
<img src="https://source.unsplash.com/1000x805">
<span>What Is It?</span>
</div>
</div>
.images {
/* 親要素の配置・サイズを指定 */
display: flex;
width: 100%;
padding: 4% 2%;
box-sizing: border-box;
height: 300px;
}
.image {
flex: 1;
/* 枠からはみ出る要素を隠す指定 */
overflow: hidden;
/* アニメーション速度の指定 */
transition: .5s;
margin: 0 2%;
/* 立体感を出すために影をつける */
box-shadow: 0 10px 10px rgba(0,0,0,.1);
line-height: 0;
}
.image img {
width: 70%;
/* 画像背景の位置調整 */
height: calc(100% - 100vh);
/* 伸縮せずに滑らかに画像が表示される */
object-fit: cover;
/* hoverした際のアニメーション速度 */
transition: .8s;
}
.image span {
/* 文字の背景色 */
background : #f1f1f1;
font-weight: bold;
color: #88888;
font-size: 10px;
display: block;
text-align: center;
/* 文字背景の高さ */
height: 30px;
line-height: 3.2;
}
.image:hover > img {
width: 100%;
height: 100%;
}
ここがポイント!
- 画像を6個用意する
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- box-shadowで奥行きをつける
- transitionで滑らかなアニメーションを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります