Q:

Transform scale and positioning issue

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"><a href="#" class="absolute_img_links">Customer Testimonials</a></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"><a href="#" class="absolute_img_links">Free Delivery</a></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"><a href="#" class="absolute_img_links">Help & Guides</a></span>
          </div>
         </div>
        </div>

A:

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"><a href="#" class="absolute_img_links">Customer Testimonials</a></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"><a href="#" class="absolute_img_links">Free Delivery</a></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"><a href="#" class="absolute_img_links">Help & Guides</a></span>
          </div>
         </div>
        </div>

