CSS动画图像宽度不起作用

Question

我正在开发一个动画CSS3图片库，点击图片会将图片放大到更大的比例。但是，我感觉好像我在放大图像之前设置图库样式的初始CSS代码强制宽度保持不变。我试图在:focus参数和自定义:focus:nth-child参数上设置宽度，但它仍保持相同的宽度。我忘了提到高度调整与:focus方法中给出的所需px长度一样好。您可以在Github Repository文件和index.html

中的stylesheets/image-gallery.css上找到源代码

我的猜测是.gallery a {... width:200px; ...}是不可更改宽度的原因，但是在同样的方法中我也设置了高度，所以我非常困惑为什么它没有调整到所需的宽度。哦，顺便说一句，原谅乱糟糟的HTML和CSS编码，我仍然处于网站的构建阶段，并将在未来的路上整理代码。非常感谢你提前给予的帮助，它将帮助我很多！

Answer 1

像这样

img{
  width: 200px;
  transition: all .2s linear;
  &:hover{
    width: 400px;
  }
}

<img src="http://www.placehold.it/200x200" alt="" />

Answer 2

您是否尝试过类似width:400px !important;的内容？ !important声明可帮助您轻松覆盖css规则的属性。