CSS overlay effect is disturbing CSS text on image - html

Question

I need to display a text on the image using CSS. I'm doing that using H2 tag:
<h2 class="post-message">Test</h2>
Here is the code for CSS:
.post-message {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
But the overlay effect is messing things up and here is the code:
.overlay{
overflow: hidden;
background: #000;
}
.overlay img{
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.overlay:hover img{
-webkit-transform: scale(1.2) rotate(-5deg);
-moz-transform: scale(1.2) rotate(-5deg);
-o-transform: scale(1.2) rotate(-5deg);
-ms-transform: scale(1.2) rotate(-5deg);
transform: scale(1.2) rotate(-5deg);
opacity: 0.7;
}
I don't know how to explain what happens and I uploaded 2 screens:
This screen shows the original image without Mouse hover: https://s22.postimg.org/xrsohlcw1/without_mouse_over.jpg
On the first image you see a gray background that I don't know from where comes
The second image is the mouse over effect: that gray image is rotating according to overlay effect and is displayed at the right corner only :/
https://s22.postimg.org/a13x0ndmp/gra_color_disappears.jpg
A little red arrow will show you what happens on the second image. A help would be great! I tried all possible things that I knew, expert opinion always is the best solution. Thanks in advance!
<div class="post-thumbnail overlay">
<a href="http://example.com/comey-wikileaks/">
<img src="http://example.com/wp-content/uploads/2017/04/comey-825x510.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510">
</a>
<h2 class="post-message">Test</h2>
</div>

Answer 1

An img has a "replaced content" layout model and basically treated as an inline element, and that includes space at the bottom by default for the bottom part of characters, so there will be a small space between the bottom of an img and the bottom of the img's container. To remove that gap at the bottom, either make the img display: block or use vertical-align: top.
If the image is rotating so far that you see the corner of it in the bottom/right corner, either increase your scale() or don't rotate as much until you can't see that anymore. I don't see it with the code you provided.
.post-message {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
.overlay {
overflow: hidden;
background: #000;
}
.overlay img {
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.overlay:hover img {
-webkit-transform: scale(1.2) rotate(-5deg);
-moz-transform: scale(1.2) rotate(-5deg);
-o-transform: scale(1.2) rotate(-5deg);
-ms-transform: scale(1.2) rotate(-5deg);
transform: scale(1.2) rotate(-5deg);
opacity: 0.7;
}
img {
vertical-align: top;
}
<div class="post-thumbnail overlay">
<a href="http://example.com/comey-wikileaks/">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510">
</a>
<h2 class="post-message">Test</h2>
</div>

Answer 2

You could actually put your img together with your <h2> inside a <div> and let the whole <div> rotate....
Here is an example base on what you wrote:
(obvously, there's a few things to readjust, but it's more or less what you want, I guess ^^)
.post-message {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
.overlay{
overflow: hidden;
background: #000;
/*these two lines are new*/
display:inline-block;
position:relative;
}
/*I apply style directly on the "overlay"*/
.overlay /*img*/{
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.overlay:hover /*img*/{
-webkit-transform: scale(1.2) rotate(-5deg);
-moz-transform: scale(1.2) rotate(-5deg);
-o-transform: scale(1.2) rotate(-5deg);
-ms-transform: scale(1.2) rotate(-5deg);
transform: scale(1.2) rotate(-5deg);
opacity: 0.7;
}
<span class="overlay">
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" />
<h2 class="post-message">Test</h2>
</span>