Html / CSS：带有鼠标悬停和链接的半屏幕图像

Question

我正在尝试从Armani Brands创建一个像这样的页面。他们的网站提供了许多不同的链接，但我想做的只是一整页，如下面的屏幕截图：http://i.stack.imgur.com/mhn8H.jpg

它会产生鼠标悬停效果，每个都会链接到不同的网址。

谢谢！

Answer 1

不是一个真正的StackOverflow问题，因为你没有问一个非常具体的问题，但无论如何它仍然存在：

好的，所以你拿一个元素并给它两个子元素作为你的大图像。 float: left他们。看起来左侧的那个略小于右侧的那个，所以给它们宽度类似于左侧的width: 45%和右侧的width: 55%。将他们的背景图像设置为您想要的图像，然后设置background-size: cover，以便图像占据整个元素。 background-position: 50% 50%将BG图像居中。

这应该可以帮助您入门。将来，请提出更具体的问题。

Answer 2

签出Armani page（您在问题中未链接到的）后，

更新我意识到您可能会专门询问悬停事件。

我在Codepen上构建了与此类似的东西，所以这应该能够回答你的问题：

http://codepen.io/hi_mynameisdave/pen/EaWrOJ

基本上它是一个<div>，其中有一个孩子<div>隐藏，直到父母徘徊过来。