Question

我试图修改我在网上找到的教程，该教程几乎是＆＃39;我需要它，但在CSS＆＃39;转换时遇到困难。效果。

基本上我需要文本从顶部开始是一个特定的空间，因为标题总是相同的高度（所以只有标题显示）。并且在悬停时我需要将文本块粘到底边，因为悬停文本可能很长或很短。

我按照我想要的方式工作，但是当我使用top时：自动转换效果不再有效。如果我给top值0，那么文本就像我想要的那样粘在顶部而不是底部。

转换是否只是不适用于＆＃39; auto＆＃39;？

＆＃13;

body{
  font-family: arial;  
}
}.showcase {
	list-style: none;
}
.showcase li {
    background: red none repeat scroll 0 0;
    display: inline-block;
    margin: 0;
    max-height: 200px;
    overflow: hidden;
    width: 300px;
}
.showcase li:last-child{
    margin: 0;
}
.showcase a {
    display: block;
    min-height: 200px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
}
.showcase a img {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    top: 0;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a:hover img {
	top: -20px;
}
.showcase .text-holder {
    top: 156px;
    bottom: 0;

    position: absolute;
    z-index: 99;
    width: 100%;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a:hover .text-holder {
    bottom: 0;
    top: auto; //changing this to 0 doesn't stick the text to the bottom, but transition works.

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a span {
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 11px;
    line-height: 20px;
    margin-top: 15px;
    width: 100%;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a h3 {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    box-sizing: border-box;
    color: #fff !important;
    cursor: pointer;
    font-size: 13px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0 !important;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

＆＃13;

<ul class="showcase">
  <li class="thumb1"> 
    <a href="http://blog.web3canvas.com/">
      <img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb1.jpg" width="500" height="374" alt="web3canvas">
      <div class="text-holder">
        <h3>My Profile<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem leo. Pellentesque et libero id lectus pretium lacinia...</span></h3>
      </div> 
    </a> 
  </li>
  
    <li class="thumb2"> 
    <a href="http://blog.web3canvas.com/">
      <img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb2.jpg" width="500" height="374" alt="web3canvas">
      <div class="text-holder">
        <h3>My Profile<span>Different length of text...</span></h3>
      </div> 
    </a> 
  </li>
</ul>

＆＃13;

Answer 1

这是副本相关的方式。

请参阅下面的代码段。这是重复链接中提供的相同的解决方案。使用transform: translateY();移动叠加层，而不是尝试计算不断变化的高度。

body{
  font-family: arial;  
}
}.showcase {
	list-style: none;
}
.showcase li {
    background: red none repeat scroll 0 0;
    display: inline-block;
    margin: 0;
    max-height: 200px;
    overflow: hidden;
    width: 300px;
}
.showcase li:last-child{
    margin: 0;
}
.showcase a {
    display: block;
    min-height: 200px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
}
.showcase a img {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    top: 0;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a:hover img {
	top: -20px;
}
.showcase .text-holder {
    top: 100%;

    position: absolute;
    z-index: 99;
    width: 100%;

  transform: translateY(-50px); /* Height you want shown at load */

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a:hover .text-holder {
    top: 100%;
  
   transform: translateY(-100%); /* moves 100% of the overlay into view. */
  
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a span {
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 11px;
    line-height: 20px;
    margin-top: 15px;
    width: 100%;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.showcase a h3 {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    box-sizing: border-box;
    color: #fff !important;
    cursor: pointer;
    font-size: 13px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0 !important;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

<ul class="showcase">
  <li class="thumb1"> 
    <a href="http://blog.web3canvas.com/">
      <img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb1.jpg" width="500" height="374" alt="web3canvas">
      <div class="text-holder">
        <h3>My Profile<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem leo. Pellentesque et libero id lectus pretium lacinia...</span></h3>
      </div> 
    </a> 
  </li>
  
    <li class="thumb2"> 
    <a href="http://blog.web3canvas.com/">
      <img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb2.jpg" width="500" height="374" alt="web3canvas">
      <div class="text-holder">
        <h3>My Profile<span>Different length of text...</span></h3>
      </div> 
    </a> 
  </li>
</ul>

“auto”经常因转换而失败，因为“auto”不一个值。您无法从值转换为模糊设置。

并非每个CSS属性都可以转换，基本规则是您只能通过绝对值进行转换。例如，您无法在0px的高度与auto之间转换。浏览器无法计算中间转换值，因此属性更改是即时的 取自：https://blog.alexmaccaw.com/css-transitions

CSS转换不适用于top：auto

1 个答案: