html - 转换规模和定位问题

Question

我对将链接居中的方式以及希望链接在悬停时缩放的方式有疑问。当我将鼠标悬停在链接上时，过渡会影响我如何将链接居中以及它们的比例。它将它们移到一边并缩放它们，但我想让它们居中。

 

    .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>

Answer 1

当您为 :hover 编写代码并使用 transform: 时，如果您不保留初始的 translate(-50%,- 50%) 并且只使用 scale(1.1) 它会像 translate 变成 0 一样理解。所以你需要保持初始 translate 值也在 hover 状态。所以代码会变成

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>