Question

您好，

我试图在悬停时放大图像并使用轻松过渡。它有效，但似乎有时会出错。我尝试通过设置来解决这个问题：

-webkit-transition-property: height,width;

但无济于事。另外，我试图理解这段代码的作者（我从CSS博客获得了一些代码）是如何实现这一点的。我知道如何悬停图像改变其宽度，但我不确定为什么作者设置负值的顶部和左侧值。我一直在尝试编辑宽度，高度，顶部和左边以在悬停时获得所需的大小，但它似乎变得偏斜 - 可能是因为我不明白负值的顶部和左侧值正在做什么。任何人都可以对此有所启发吗？我已经阅读了一些有关负利润的文章，但我不明白这里做了什么。

以下是代码：

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
.thumbnail{
  width: 100px;
  height: 100px;
}
.thumbnail:hover {
    position:relative;
    top:-50px;
    left:-35px;
    width:500px;
    height:auto;
    display:block;
    z-index:999;
    cursor: pointer;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}

Answer 1

这是我创建的小提琴，解决了这个问题。我摆脱了相对位置并将高度设置为auto而不是100px。

这是我做的代码。

 <img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" 
 class="thumbnail"/>

 .thumbnail{
    width: 100px;
    height: auto;
    position:relative;
 }
 .thumbnail:hover {
     width:500px;
     height:auto;
     display:block;
     z-index:999;
     cursor: pointer;
     -webkit-transition-property: all;
     -webkit-transition-duration: 0.3s;
     -webkit-transition-timing-function: ease;
}

抱歉忘记更新小提琴这里是新链接。

https://jsfiddle.net/xakhLafd/1/

Answer 2

CSS中的$k(".cep").blur(function() { //new variable to keep only digits var cep = $k(this).val().replace(/\D/g, ''); //check if it's not empty if (cep != "") { //regex to validate zip var validacep = /^[0-9]{8}$/; //check zip format if(validacep.test(cep)) { //just fills with "..." before getting results from webservice $k(".logradouro").val("..."); $k(".bairro").val("..."); $k(".cidade").val("..."); $k(".uf").val("..."); //send query to the webservice json url $k.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { var stateToCode = { "AC":485, "AL":486, "AP":487, "AM":488, "BA":489, "CE":490, "DF":511, "ES":491, "GO":492, "MA":493, "MT":495, "MS":495, "MG":496, "PA":497, "PB":498, "PR":497, "PE":500, "PI":501, "RJ":502, "RN":503, "RS":504, "RO":505, "RR":506, "SC":507, "SP":508, "SE":509, "TO":510, } var region = dados.uf; //filling the fields $k(".logradouro").val(dados.logradouro); $k(".bairro").val(dados.bairro); $k(".cidade").val(dados.localidade); $k(".uf").val(stateToCode[region]); $k('.numero').val('').focus(); } //end if. else { //if zip is invalid limpa_formulário_cep(); alert("CEP não encontrado."); } }); } //end if. else { //cep é inválido. limpa_formulário_cep(); alert("Formato de CEP inválido."); } } //end if. else { //cep sem valor, limpa formulário. limpa_formulário_cep(); } });规则用于在图像放大后保持图像的中心点不变。否则，当图像放大时，您会感觉它被移动到右下方。

然而，这不是一个好的设计 - 宽度/高度变化需要计算每个动画帧上的新布局和重绘UI元素，这是非常昂贵的（您可以检查此SO重绘和重排之间的区别）。这就是为什么你觉得＆＃34;它似乎有时会出错。＆＃34;

更好的方法是使用top:-50px; left:-35px;。请检查解决问题的jsfiddle。新的CSS代码是：

transform

图片放大悬停

2 个答案: