我想让我的图片在悬停时有一个不透明的文字叠加层。我已经设法让它做到这一点，但我希望它只向右滑动，而且它是向右向上滑动。我怎样才能让它只向右滑动？谢谢。
html, body{
margin:0em;
padding:0em;
}
a{
text-decoration:none;
color:white;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
#Bar{
width:2500em;
height:5em;
background-color:black;
text-align:right;
display: table-cell;
vertical-align: bottom;
padding:0;
}
#Logo{
width:6%;
height:auto;
float:left;
padding-left:11em;
padding-bottom:0em;
padding-top:1em;
}
#Menu{
width:2500em;
height:auto;
background-color:#0e1f5a;
text-align:center;
display: table-cell;
vertical-align: bottom;
padding:0.5em;
font-size:1.2em;
font-family:Lato;
}
.DJHover { position: relative;opacity: 0.7; width: .4em; height: 1.3em;}
.DJHover .caption5 {opacity:0 ; position: absolute; height:1.3em; width: .4em;bottom: 0;left: 0;padding: 1.175em 0;-webkit-transition: 3s ease-in-out; -moz-transition: .3s ease-in-out;
-o-transition: 3s ease-in-out;
transition: 3s ease-in-out;}
.DJHover:hover .caption5 { opacity: 0.7;width: 5.4em; height: 1.3em;font-size:5em;color: White; background: black; text-align: center; font-weight:bold;-moz-transform: translate(0em,0);-webkit-transform: translate(0em,0);
-o-transform: translate(0em,0);
-ms-transform: translate(0em,0);
transform: translate(0em,0);
;}
#Footer{
width:2500em;
height:5em;
background-color:#0e1f5a;
text-align:left;
display: table-row;
vertical-align: bottom;
padding:0.5em;
font-size:1em;
font-family:Lato;
color:white;
}
#ContactButton{
border:0.0625em solid white;
background-color:black;
padding-left:2.5em;
padding-right:2.5em;
}
#Bar2{
width:2500em;
height:3em;
background-color:black;
text-align:right;
display: table-cell;
vertical-align: bottom;
padding:0;
}<!DOCTYPE html>
<html>
<head>
<title>Home </title>
<link type="text/css" rel="stylesheet" href="file:///home/chronos/u-cba4e7cda58d8e8812f74a8c51a34fa154676b3f/Downloads/M1/StyleSheet3.css"/>
</head>
<body style="background-color:black">
<div id="Bar">
<a href=""/></a>
</div>
<br>
<div id="Menu">
<a style="margin-right:2em" href="file:///home/chronos/u-cba4e7cda58d8e8812f74a8c51a34fa154676b3f/Downloads/M1/Home.html"> Home </a>
<a style="margin-right:2em" href="file:///home/chronos/u-cba4e7cda58d8e8812f74a8c51a34fa154676b3f/Downloads/M1/DJs.html">DJs</a>
</div>
<center>
<br><br><br>
<a class="DJHover" href="file:///home/chronos/u-cba4e7cda58d8e8812f74a8c51a34fa154676b3f/Downloads/M1/DJs.html">
<img style="width:27em" src="http://www.dancefair.tv/wp-content/uploads/2015/05/How-to-secure-DJ-gig.jpg"/>
<div class="caption5"><br>DJS</div>
</a>
</center>
<br><br><br>
<div id="Footer">
<table style="padding-left:20%;padding-right:5%">
<tr>
<td>
<a href=""><div id="ContactButton"><p>Contact</p></div></a>
</td>
<td>
<a href=""></a>
</td>
<td>
<p style="margin-left:5em"><strong>TEL</strong></p>
<p style="margin-left:5em"><strong>ADDRESS</strong></p>
</td>
<td>
<p style="margin-left:5em">©2015 by <a href="" style="text-decoration:underline;color:Red"></a>.</p>
</td>
</tr>
</table>
</div>
<div id="Bar2"></div>
</body>
</html>最佳答案
您的半透明叠加层实际上不是向上和向右滑动，而是从 width: .4em; 扩展到 width: 5.4em; - 这看起来像是一个无意的错字(？)
您的样式中还有其他(也可能是无意的？)拼写错误
例如。 -webkit-transition: 3s 缓入缓出； -moz-transition: .3s 缓入缓出;
我在下面转载了我认为您想要实现的目标:
body {
margin: 0;
padding: 0;
background-color: rgb(0,0,0);
}
.DJHover, .DJHover img, .DJHover .caption5 {
display: inline-block;
top: 100px;
left: 200px;
width: 432px;
height: 264px;
overflow: hidden;
}
.DJHover {
position: relative;
color: rgb(255,255,255);
text-decoration: none;
opacity: 0.7;
}
.DJHover .caption5 {
position: absolute;
top: 0;
left: 0;
font-size: 5em;
font-weight:bold;
text-align: center;
opacity: 0;
-webkit-transform:translate(-100%,0);
-moz-transform:translate(-100%,0);
-o-transform:translate(-100%,0);
-ms-transform:translate(-100%,0);
transform:translate(-100%,0);
-webkit-transition: 3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.DJHover:hover .caption5 {
color: rgb(255,255,255);
background-color: rgb(0,0,0);
opacity: 0.7;
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}<a class="DJHover">
<img src="http://www.dancefair.tv/wp-content/uploads/2015/05/How-to-secure-DJ-gig.jpg" />
<div class="caption5"><br />DJS</div>
</a>关于html - 无法让不透明的文本覆盖仅向右滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34086614/