Question

我没有形状或组建编码器，但已对我的BigCartel网站做了一些调整，预计将在未来几周内推出。我有一个服装系列，我想让选择产品的消费者能够将鼠标悬停在产品的图像上以放大... ...（这里是Nike的一个例子，我的意思是：{{3我希望知道使用什么代码来制作消费者点击的图像/产品，并且当鼠标悬停在某个区域时正在查看更大/放大......我看到上传了一些代码，但是我知道我不是专业编码器，我想知道在哪里插入自定义编码。我有一个CSS选项，HTML和我不知道我是否应该去“产品”或所有编码......（抱歉新手问题）......

我也想知道（如果我也可以在这里滑动这个问题）如何在我的BigCartel网站上加快幻灯片放映的速度，甚至可能将其更改为溶解选项......再次，我将在哪里插入该代码..

我自己做了一些小改动，但同样，我没有编码，还有一些额外的调整，我很想做到不让我的网站如此“千篇一律”BigCartel的好人，发给我这个链接搜索并提出问题。非常感谢您的帮助！

Answer 1

你试过这个吗？这对我来说总是有用https://codepen.io/ccrch/pen/yyaraz

<强> JS

  <div class="tiles">
    <div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
    <div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
    <div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
  </div>

<强> HTML

  @import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700);

  body {
    background: #fff;
    color: #000;
    margin: 0;
  }

  .tiles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .tile {
    position: relative;
    float: left;
    width: 33.333%;
    height: 100%;
    overflow: hidden;
  }

  .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .5s ease-out;
  }

  .txt {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 10%;
    left: 0;
    font-family: 'Roboto Slab', serif;
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    cursor: default;
  }

  .x {
    font-size: 32px;
    line-height: 32px;
  }

<强> CSS

sudo enpkg h5py

当鼠标悬停在bigcartel中时放大图像上的区域

1 个答案: