html - CSS - 图像溢出技巧

Question

我坚持使用一些设计技术来制作像这样的图像元素框

实际图片的最大高度为300px，宽度为225px。包含图像和文本的元素框的宽度和高度为 190px x 190px 我正在使用此图像 http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg

我尝试对图像元素使用 overflow: hidden 来隐藏它的高度以显示图像文本。但我只会这样http://jsfiddle.net/Dkh4q/

谁能告诉我我犯了什么错误？

谢谢!

更新

有关预期结果的更多信息，如果您可以登录 zerply，请查看此 http://zerply.com/christievdc/portfolio例如。

总结

最后，我犯了一个愚蠢的错误，我在 addmenu-item 中添加了额外的 } 东西。感谢回答者!

Answer 1

试试这个，对于可变宽度和高度，您需要使用一些 javascript。

.addmenu-item {
margin-top:25px;
float:left;
overflow:auto;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}