根据标题宽度过渡

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

由于您希望转换停止字幕结束，此时字幕的绝对位置将为左= 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>