Animation not working when I hover over image - html

Question

I am trying to add a sweep to the right animation on my image so that when you hover the image it sweeps to the right and it shows the text on hover as well. I got this to work just find with buttons but I am lost on how to go about doing this. This is what I have so far with my code:
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>

Answer 1

I made some changes to your CSS to make it work smooth and without insane jumping when you hover left side of the image. Here is the CSS and below is the description what changes and why I have made.
.portfolio-box {
position: relative;
overflow: hidden;
display: inline-block;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
transition: all 0.5s ease-out;
display: block;
/*object-fit: contain;*/
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: all 0.5s ease-out;
}
.portfolio-box:hover .portfolio-mask {
transform: scaleX(1);
opacity: .85;
color: white;
}
Changes I made:
Added display: inline-block; for .portfolio-box - to make it be as big as image inside.
Added display: block; for image to prevent 2-3px empty space under image when it is displayed inline (default).
Added transition: all 0.5s ease-out; for image, to prevent jumping when change position.
I changed transition from transform to all to animate not only move but opacity of mask container.
Animation are now added for hover on .portfolio-box, because it is static container, which is very important for effect you want to achieve - if you add animation on image hover then you will get infinite animation, because when you hover your mouse above image then it will slide to the right and after then it will be no longer hovered so it will go back to initial state and then it will be hovered again so it will go to the right... repeat initity ;)

Answer 2

I think from your description that what you are trying to do is a transform. For this, just add a translateX transform (of your desired size) to the css.
Hope this helps.
.portfolio-box {
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio-box img {
width: 300px; /*changed this from 100% for the q*/
height:auto;
/*object-fit: contain;*/
}
.portfolio-box img.animate:hover{
transform: translateX(5em);
}
.portfolio-mask {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
background: #060606;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.5s ease-out;
}
.portfolio-mask:hover:after {
transform: scaleX(1);
}
.portfolio-mask:hover {
opacity: .85;
color: white;
}
<div class="portfolio-box">
<img class="animate" src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="Coffee">
<div class="portfolio-mask">
<p class="portfolio-text">Design Mock up</p>
</div>
</div>