Using CSS transform property to hover text over image - css

Question

I'm using the transform:translateY();to hover text over two images.
The problem is that this method is not allowing me to position my text over specific parts of the images.
Ideally, I want to the freedom of being able to move the text more to the left, or to the right. At the moment I can only move the text up and down.
Alternatives method suggestions are always welcome.
Code is below and here is a codepen - (Hover the images with your screen full width as I haven't included media queries).
HTML
<div class="projects">
<div class="art-project1">
<img class="img-img" src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2014/12/16/08/138188934.png" width="600" height="400" />
<p class="project-description1">Get Involved</p>
</div>
<div class="art-project2">
<img class="img-img" src="http://i.huffpost.com/gadgets/slideshows/343100/slide_343100_3557153_free.jpg" width="600"height="500" />
<p class="project-description2">Be Apart</p>
</div>
</div>
CSS
body {
background-color:#f5f5dc;
}
* {
box-sizing: border-box;
}
p {
color: #3232CD;
font-weight:bold;
font-size: 2rem;
}
.projects {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
/* Images -------------------*/
.img-img {
padding-top: 80px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
.art-project1 {
display: inline-block;
vertical-align: middle;
margin-left: 20%;
margin-right: auto;
max-width: 100%;
height: auto;
}
.art-project2 {
display: inline-block;
vertical-align: middle;
margin-left: -20%;
margin-right: auto;
margin-top:10%;
max-width: 100%;
height: auto;
}
.project-description1 {
position:absolute;
color: #3232CD;
visibility: hidden;
opacity: 0;
transform:translateY(-1000%);
}
.art-project1:hover .project-description1 {
visibility: visible;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
.project-description2 {
position:absolute;
color: #3232CD;
visibility: hidden;
opacity: 0;
transform:translateY(-400%);
}
.art-project2:hover .project-description2 {
visibility: visible;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}

Answer 1

Try using translate() ;)
Hope this helps!

Answer 2

If you use position: absolute on an element, you first need to give its parent container position relative. Then you can simply use the top and left (or bottom and right parameters to position the absolute element, with percentage or pixel values - no need for transform: translateat all (unless you need exact centering).
body {
background-color:#f5f5dc;
}
* {
box-sizing: border-box;
}
p {
color: #3232CD;
font-weight:bold;
font-size: 2rem;
}
.projects {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
/* Images -------------------*/
.img-img {
padding-top: 80px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
.art-project1 {
position: relative;
display: inline-block;
vertical-align: middle;
left: 20%;
max-width: 100%;
height: auto;
}
.project-description1 {
position:absolute;
top: 15%;
left: 6%;
color: #3232CD;
visibility: hidden;
opacity: 0;
}
.art-project1:hover .project-description1 {
visibility: visible;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.70s;
}
<div class="projects">
<div class="art-project1">
<img class="img-img" src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2014/12/16/08/138188934.png" width="600" height="400" />
<p class="project-description1">Get Involved</p>
</div>