Größe ändern, ohne andere Elemente zu verschieben

Ich benutze eine Jquery-Animation, um die Größe eines Symbols bei Hover zu ändern. Gibt es eine Möglichkeit, die Größe des Symbols zu ändern, ohne dass sich die anderen Elemente verschieben? Run Snippet unter dem Mauszeiger über das Symbol. (Hier ist der Effekt, den ich für https://semantic-ui.com/elements/icon.html schweben über eines der Symbole werde)Größe ändern, ohne andere Elemente zu verschieben

$(document).ready(function() { 
 
    $('.icon').hover(function(){ 
 
     $(this).stop().animate({ fontSize : '3em' }); 
 
    }, function(){ 
 
    $(this).stop().animate({ fontSize : '1.5em' }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 

 

 
<div class="ui doubling five column grid"> 
 
     <div class="column">  
 
      <div class="ui center aligned segment basic"> 
 
      <i class="large home icon"></i> 
 
      <p style="padding-top: 5px;"> 
 
      home 
 
      </p>  
 
      </div>  
 
     </div> 
 
    </div> 
 
    
 
    some other content

Quelle

2017-09-18 Bryan Dellinger

Sie könnten verwenden 'Position: auf das Symbol absolute' es aus dem Dokumentenfluss zu nehmen, aber ich sehe nicht, wie es wäre Arbeit in Bezug auf die Benutzeroberfläche, wie es das Wort "nach Hause" abdecken würde, wenn es nicht nach unten bewegt. Beachten Sie auch, dass Sie hier kein JS benötigen. Sie können CSS alleine mit dem ': hover'-Selektor und der' transition'-Regel verwenden –

Sie können versuchen, .doubling> .column> .ui {minimum-height: [THIS_BLOCK_HEIGHT_ON_HOVER]} – Beneris

Versuchen Sie eine Transformation und ein Übergang statt verwenden. Alle CSS, kein JS/JQ erforderlich

.icon { 
 
    transition:transform .25s ease; 
 
} 
 

 
.icon:hover { 
 
    transform:scale(1.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 

 

 
<div class="ui doubling five column grid"> 
 
     <div class="column">  
 
      <div class="ui center aligned segment basic"> 
 
      <i class="large home icon"></i> 
 
      <p style="padding-top: 5px;"> 
 
      home 
 
      </p>  
 
      </div>  
 
     </div> 
 
    </div> 
 
    
 
    some other content

Quelle

2017-09-18 13:53:11

Größe ändern, ohne andere Elemente zu verschieben

Antwort

Verwandte Themen