根据标题宽度过渡答案

【问题标题】：Transition according to caption width根据标题宽度过渡
【发布时间】：2015-01-07 14:26:50
【问题描述】：

我正在构建一个从右到左过渡的图像叠加层。过渡效果很好，但标题是图像宽度的 45%，我希望过渡停止在标题宽度的末尾，而不是一直持续到图像宽度的末尾。
这是我的代码

.screenshot {
  float: left;
  margin: 50px;
  position: relative;
  overflow: hidden;
}

.screenshot > * {
  display: block;
}

.screenshot h3 {
	margin: 8px;
	padding: 0;
	text-indent: 0;
	text-align: right;
	font: 21px/25px "TwCenMT";
	text-transform: none;
	text-decoration: none;
	color: #fff;
	letter-spacing: normal;
}

.screenshot-caption {
	position: absolute;
	width: 45%;
	height: 100%;
	background: rgb(93, 84, 77);
	background: rgba(93, 84, 77, .7);
	color: #ed4e6e;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
  color: #fff;
}
.screenshot-caption a {
  display: table;
  margin: 0 auto;
  bottom:0;
  text-align: center;
  background: #2c3e50;
  padding: 6px 12px;
  color: #000;
  text-decoration: none;
}

.screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}
.screenshot-caption_right {
  top: 0;
  left: 100%;
}

.screenshot:hover .screenshot-caption {
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.screenshot:hover .screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 1;
}

 <div class="screenshot">
  <img src="http://fillmurray.com/300/200">
  <div class="screenshot-caption screenshot-caption_right">
    <h1>Right to Left</h1>
    <a href="#">Read More</a>
  </div>
</div>

http://jsfiddle.net/vhp2nL7k/

根据标题宽度，过渡应为图像的 45%

【问题讨论】：

在.screenshot-caption 中更改width: auto; 并尝试。

标签： html image css css-transitions transition

【解决方案1】：

由于您希望过渡停止字幕的结尾，因此此时字幕的绝对位置在这种情况下为 left = 100-(width of caption div)% = 55% .

.screenshot {
  float: left;
  margin: 50px;
  position: relative;
  overflow: hidden;
}

.screenshot > * {
  display: block;
}

.screenshot h3 {
	margin: 8px;
	padding: 0;
	text-indent: 0;
	text-align: right;
	font: 21px/25px "TwCenMT";
	text-transform: none;
	text-decoration: none;
	color: #fff;
	letter-spacing: normal;
}

.screenshot-caption {
	position: absolute;
	width: 45%;
	height: 100%;
	background: rgb(93, 84, 77);
	background: rgba(93, 84, 77, .7);
	color: #ed4e6e;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
  color: #fff;
}
.screenshot-caption a {
  display: table;
  margin: 0 auto;
  bottom:0;
  text-align: center;
  background: #2c3e50;
  padding: 6px 12px;
  color: #000;
  text-decoration: none;
}

.screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}
.screenshot-caption_right {
  top: 0;
  left: 100%;
}

.screenshot:hover .screenshot-caption {
  top: 0;
  left: 55%;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.screenshot:hover .screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 1;
}

 <div class="screenshot">
  <img src="http://fillmurray.com/300/200">
  <div class="screenshot-caption screenshot-caption_right">
    <h1>Right to Left</h1>
    <a href="#">Read More</a>
  </div>
</div>

【讨论】：