hoverした時に画像を大きくする方法 #CSS

//css
img:hover{
   transform:scale(1.1,1.1);
   transition: 1s;
}
//hoverした時に画像を大きくする

hoverして画像を大きくしたいけど親要素からははみ出したくない場合

.sample{
  overflow: hidden;
  display: inline-block;
}
.sample img:hover{
  transform:scale(1.1,1.1);
  transition: 1s;
}

NuxtにTailwindcssで書きたいけど慣れてないから普通のcss書いてしまう...。
Tailwindcssはnth-childとか使えないから結構不便なんだよな〜
総合的にはいいのかもしれないけど。。。