根据标题宽度进行转换

Question

我正在构建一个从右到左的图像覆盖过渡。转换工作正常，但标题是图像的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%

Answer 1

如果您希望转换停止字幕的末尾，则此时字幕的绝对位置将为left=100-（字幕宽度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>