Question

我试图制作悬停图片并添加指向div的链接，但div不适合页面。

看看图像是如何被切断的？

有人有什么想法吗？

以下是我的代码。

CSS

#cf {
  position:relative;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;

}

#cf img.top:hover {
  opacity:0;

}

HTML：

<a href="http://www.peterstavrou.com/product/ebay-listing-template/"><div id="cf"><img class="bottom" src="http://www.peterstavrou.com/wp-content/uploads/2014/11/eBay-Listing-Template-Price.jpg" alt="eBay Template Listing" width="292" height="311" /><img class="top" src="http://www.peterstavrou.com/wp-content/uploads/2014/11/eBay-Listing-Template.jpg" alt="eBay Template Listing" width="292" height="311" /></div></a>

&nbsp;
<strong>Summary:</strong> TEST TEST TEST
<a title="eBay Template Listing" href="http://www.peterstavrou.com/product/ebay-listening-template/">Click here for more information.</a>

jsFiddle http://jsfiddle.net/hz80govj/

Answer 1

div只包含一个图像，因此它的宽度/高度是从图像宽度/高度导出的，当前设置为width="292" height="311"。

如果您希望div / image调整为屏幕大小，请从图像中删除宽度/高度并使用css设置图像大小：

img{
  max-width: 100%;
}

Answer 2

你的问题一点也不清楚，但正如我所知，你需要将div与图片的大小相匹配。如果我是正确的，请使用以下CSS。

#cf {
    position:relative;
    float:left;
    margin:0 auto;
}

.top {
    position:absolute;
    left:0;
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;
    transition:opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity:0;
}

.bottom {
    position:inherit;
}

适合Div到页面？

2 个答案: