Transform scale and positioning issue - html

Question

I'm having an issue with the way I have centered my links and the way I want to links to scale on hover. When I hover over the links the transition is effecting how I have centered the links as well as the scale of them. It moves them to the side and scales them but I want to keep them centered.
.position{
position: relative;
}
.absolute_img_links:link, .absolute_img_links:visited{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
background-color: #ff6633;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 1.4em;
padding: 0.5em;
transition: transform:scale 1s;
}
.absolute_img_links:hover{
transform: scale(1.1);
}
<div class="container" id="bottom_col_margin">
<div class="row">
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/testimonials_img.jpg">
<span class="text_center">Customer Testimonials</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/delivery_img.jpg">
<span class="text_center">Free Delivery</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/help_guides_img.jpg">
<span class="text_center">Help & Guides</span>
</div>
</div>
</div>

Answer 1

when you write the code for :hover, and you use transform: , if you don't keep the initial translate(-50%,-50%) and only use scale(1.1) it will understand like the translate becomes 0 . so you need to keep the initial translate values also in the hover state . so the code will become
transform:translate(-50%,-50%) scale(1.1)
.position{
position: relative;
}
.absolute_img_links:link, .absolute_img_links:visited{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
background-color: #ff6633;
transform: translate(-50%,-50%);
color: #ffffff;
font-size: 1.4em;
padding: 0.5em;
transition: 3s;
}
.absolute_img_links:hover{
transform: translate(-50%,-50%) scale(1.1);
}
<div class="container" id="bottom_col_margin">
<div class="row">
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/testimonials_img.jpg">
<span class="text_center">Customer Testimonials</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/delivery_img.jpg">
<span class="text_center">Free Delivery</span>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive position" src="<?php bloginfo('template_directory'); ?>/images/help_guides_img.jpg">
<span class="text_center">Help & Guides</span>
</div>
</div>
</div>