CSS3 animation - two issues - html

Question

Here are some issues which I can't seem to figure out.
When you hover on the image I am animating a few styles but as you will see, when the border size increases, everything else moves with it.
When you change the sidetext to something longer or shorter, it decides to move positions.
Please can someone explain what I am doing wrong?
/*
Colors:
#FF0F00 = red
#FFFF04 = yellow
#387F23 = green
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
}
.animate {
animation-fill-mode: forwards;
animation-duration: 1s;
}
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
/* FADE IN RIGHT */
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.hero__img img {
max-width: 100%;
vertical-align: middle;
}
.hero__center:after {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
/* z-index: -1; */
opacity: 0;
transition: opacity 0.4s ease-in;
}
#media (min-width: 920px) {
.hero {
margin: 0 auto;
width: 700px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.hero__heading {
position: absolute;
font-size: 80px;
color: #0004f3;
text-transform: uppercase;
font-weight: bold;
font-kerning: -3px;
letter-spacing: 4px;
z-index: 1;
}
.hero__heading--top {
left: -85px;
top: -150px;
opacity: 1;
}
.hero__heading--bottom {
right: -85px;
bottom: -150px;
opacity: 1;
}
.hero__center {
position: relative;
border: 5px solid blue;
transition: border 0.4s ease-in;
}
.hero__center:hover {
border: 10px solid #387F23;
transition: border 0.4s ease-in;
}
.hero__center:hover:after {
opacity: 0.4;
transition: opacity 0.4s ease-in;
}
.hero__center:hover .hero__sideText {
color: red;
transition: color 0.4s ease-in;
}
.hero__img img {
opacity: 1;
transition: opacity 0.4s ease-in;
}
/* .hero__img:hover img {
opacity: 0.4;
transition: opacity 0.4s ease-in;
} */
/* .hero__center:hover {
border: 5px solid green;
transition: border 0.5s;
} */
.hero__sideText {
position: absolute;
top: 50%;
color: #0004f3;
transition: color 0.4s ease-in;
}
.hero__side--left {
left: -50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: center center;
}
.hero__side--right {
right: -50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: center center;
}
}
<div class="container">
<div class="hero animate fadeIn one">
<div class="hero__center">
<span class="hero__heading hero__heading--top animate fadeInLeft one">Lorem</span>
<span class="hero__heading hero__heading--bottom animate fadeInRight one">Ipsum</span>
<div class="hero__img">
<img src="http://via.placeholder.com/980x550" alt="">
</div>
<span class="hero__sideText hero__side--left">Side text</span>
<span class="hero__sideText hero__side--right">Side text</span>
</div>
</div>
</div>

Answer 1

Since the size of your box changes by changing the border width, the elements change their position aswell.
try adding :
.hero__center:hover {
margin:-5px;
}
to work against the border change.
2.
The transform rotation uses the center point of your element as its origin (transform-origin: center center;). When increasing the characters you increase the width so the point which the rotation choses as its origin shifts aswell.
To change that you have to fix that point to a specific location. Try adding a div wrappers around your sideText spans with the following css:
.wrapper-left {
position:relative;
left: -50%;
}
.wrapper-right {
position:relative;
left: 50%;
}