Question

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

我做了它，所以标题位于图像的底部，段落被隐藏，当你将鼠标悬停在项目上时，标题会显示文字，图像变得更暗和灰度。

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

首先，你会在演示中看到太长的标题搞砸了，直到你悬停才完全显示。
此外，我注意到不同的字体需要translate()的初始h3和段落的不同值。必须有一个更好的方法来做到这一点，而不是弄乱价值观，直到它看起来很好。

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结构以使跨浏览器兼容请检查

＆＃13;

*{
	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;
}

＆＃13;

<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>

＆＃13;

您也可以在这里查看jsFiddle

Answer 2

试试这个

<强> HTML

<div class="web-item">  <a href="#">
        <img src="http://lorempixel.com/253/150" alt="" class="item-thumb">
        <div class="web-content">    
        <h3>Works Fine</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>
    </a>
</div>
<div class="web-item">  <a href="#">
        <img src="http://lorempixel.com/253/150" alt="" class="item-thumb">
            <div class="web-content">    
        <h3>Too Long. Things Are Getting Bad.</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>    
    </a>
</div>
<div class="web-item different-font">   <a href="#">
        <img src="http://lorempixel.com/253/150" alt="" class="item-thumb">
            <div class="web-content">    
        <h3>Different font</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>
    </a>
</div>

<强> CSS

p{
    margin:0;
    padding:0;
}
.web-item{
    position:relative;
    overflow:hidden;
    width: 253px;
    height:150px;
    font-family: sans-serif;
    margin:10px 0;
}

.web-item a{
    text-decoration:none;
    color:white;
}
.web-item a:hover .web-content{    
    top:5px;
    transition: all 1s;
}
.web-item h3{    
    margin:0;
    padding:0;
    font-size: 18px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  color: #fff;

}
.web-content{
    position:absolute;
    bottom:-95px;
    transition: all 1s;
    padding:5px;
}
.web-content p{
    font-size:12px;
}

Fiddle Demo

带标题的缩略图 - 显示有关悬停的更多信息

2 个答案: