html - 带标题的缩略图 - 在悬停时显示更多信息

Question

我有一个名为 web-item 的元素，它包含一个图像缩略图、一个标题和一小段文本。

我这样做是为了让标题位于图像的底部并且隐藏段落，当您将鼠标悬停在元素上时，标题会上升以显示文本并且图像变得更暗和灰度。

它实际上看起来不错，但我有两个主要问题:

• 首先，您会在演示中看到过长的标题会造成困惑，并且在您将鼠标悬停之前不会完全显示。

• 此外，我注意到不同的字体对h3 和段落的初始translate() 需要不同的值。必须有更好的方法来做到这一点，而不是乱改值(value)观直到它看起来不错。

HTML:

<div class="web-item">
    <a href="#">
        <img src="http://lorempixel.com/253/150" alt="" class="item-thumb">
        <h3>Title</h3>                  
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </a>
</div>

CSS:

.web-item {
  position: relative;
  overflow: hidden;
  width: 253px;
  margin: 1em 0;
}
.web-item a {
  text-decoration: none;
}
.web-item a:hover img {
  -webkit-filter: grayscale(100%) brightness(0.5);
}
.web-item a:hover p {
  transform: translateY(0);
}
.web-item a:hover h3 {
  transform: translateY(0);
  background: none;
}
.web-item img {
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.web-item h3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 1rem;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  color: #fff;
  background: linear-gradient(transparent, #000);
  transform: translateY(200%);
  transition: all 0.2s ease-in-out;
}
.web-item p {
  position: absolute;
  bottom: 0;
  padding: 1em;
  padding-top: 2em;
  font-size: 12px;
  color: #fff;
  transform: translateY(110%);
  transition: all 0.2s ease-in-out;
}

You can take a look at a working demo here.

Answer 1

我已经更改了您的 html 和 css 结构以使跨浏览器兼容，请检查

*{
	padding:0;
	margin:0;
}
.web-item {
	position: relative;
	overflow: hidden;
	width: 253px;
	margin: 1em 0;
}
.web-item a {
	text-decoration: none;
}
.web-item li:hover img {
	-webkit-filter: grayscale(100%) brightness(0.5);
}
.web-item li div.text{
	transform: translateY(67%);
	transition: all 0.2s ease-in-out;	
	position:absolute;
	top:0;
	left:0;
	width:100%;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.web-item li:hover div.text {
	transform: translateY(0);
}
.web-item li:hover h3 {
	background: none;
}
.web-item img {
	width: 100%;
	transition: all 0.2s ease-in-out;
}
.web-item h3 {
	font-size: 18px;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	color: #fff;
	background: linear-gradient(transparent, #000);
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:15px 15px 10px;
}
.web-item p {
	font-size: 12px;
	color: #fff;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:0 15px 15px 15px;
}

<ul class="web-item">
    <li>
        <img src="http://lorempixel.com/253/150" alt="" class="item-thumb">
        <div class="text">
        <h3>Title</h3>                  
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        </div>
    </li>
</ul>

你也可以查看jsFiddle这里