我目前正在使用bootstrap并拥有3x3网格图像。它们是200x200的图像,我已经无处可寻,试图找到一种方法来获得叠加效果。我最近才开始编写代码。
Serenbe.com在页面的中间位置(也是3x3网格)正是我想要的。照片变亮,当光标在其上方时,会在其上方显示徽标。但是,如果照片不可能或太复杂,我会满足于文字/链接。现在绝对没有任何工作。
我的图像被安排在容器内的div中。 div占用了6列。我应用的唯一样式是删除填充,以便它接触页面的边缘。
有什么建议吗?我100%迷失在这里,任何有用的东西。
谢谢!
答案 0 :(得分:0)
你听说过用你的css悬停吗? :)它非常酷,我认为这是该网站用于其图像的内容。
一个简单的方法来为初学者做你想要的是我会有两张照片。一个是原始的,第二个是你想要的效果。对于serenbe来说,似乎他们只是使用photoshop将徽标添加到顶部,然后更改了照片的不透明度。
然后我会将你的img包装在div中,然后在你的css中执行类似的操作:
.customdiv{
height:200px;
width:200px;
background-image:url("imagelinkhere");
}
.customdiv:hover{
background-image:url("newimagehere");
opacity:.5;
}
这样做是将鼠标悬停在div上时将div中的内容更改为新图片,然后在图像上应用不透明度。
这些只是帮助您入门的一些提示!祝你好运