画像をhoverしてオシャレにズームする動きをつける

CSSコード

.sample_img {
width:500px;// サンプル画像の横幅
overflow: hidden;//はみ出た部分を非表示にする
}
.sample_img img {
height: auto;
transition: transform .6s ease;//6秒かけて緩やかに変化させるアニメーション
}
.sample_img:hover img {
transform: scale(1.1) !important;//マウスを置いたら画像が拡大する
}

ヘッダー下カードのCSSコード

/*ブログカード画像拡大*/
.st-cardlink-card {
overflow: hidden !important;
}
.st-cardlink-card img {
height: auto !important;
transition: transform .6s ease !important;
}
.st-cardlink-card:hover img {
transform: scale(1.1) !important;
}

投稿一覧のCSSコード

/*投稿一覧画像拡大*/
.kanren:not(.st-cardbox) dt{
overflow: hidden !important;
}
.kanren:not(.st-cardbox) dt img {
height: auto !important;
transition: transform .6s ease !important;
}
.kanren:not(.st-cardbox) dt:hover img {
transform: scale(1.1) !important;
}