Can someone help me make my image have an opaque overlay with text that slides only right when hovered over? Currently, it's sliding both right and up. Any suggestions on how to fix this issue would be greatly appreciated. Thank you.
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>