Question

当我悬停时，我想让我的照片有一个带文字的不透明覆盖。我设法让它做到这一点，但我希望它只能向右滑动，它会向右和向上滑动。我怎样才能让它只滑向右边？谢谢。

＆＃13;

<!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">&#169;2015 by <a href="" style="text-decoration:underline;color:Red"></a>.</p>
	         </td>
	       </tr>
	     </table>
	    
	   </div>
	   <div id="Bar2"></div>
	     
	      
  </body>
</html>

＆＃13;

{{1}}

＆＃13;

Answer 1

您的半透明叠加层实际上从width: .4em;扩展到width: 5.4em;，而不是向上和向右滑动 - 这看起来像是无意识拼写错误的结果（？）

你的风格中还有其他（也可能是无意的？）拼写错误

例如。 -webkit-transition: 3s ease-in-out; -moz-transition: .3s ease-in-out;

我在下面转载了我认为你想要实现的目标：

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>

无法将不透明文本叠加设置为仅向右滑动

1 个答案: