Question

我想问一下如何在这里实现像这样的悬停效果？我指的是当你悬停图像时的那个。 Link to a page with desired effect

Answer 1

您可以使用以下属性：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dematte.at/tinyColorPicker/jqColorPicker.min.js"></script>

<div id="getColor">Color</div>
<input type="text" value="#123456" id="colorA">

这会在图像悬停时对图像进行放大。您可以改变参数以达到预期效果。

Answer 2

你可以看一下这个，它与你想要的相似：

＆＃13;

div {
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: relative;
}
p {
    background-color: black;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    color: white;
    line-height: 100px;
}
img:hover {
-moz-transform: scale(2.0);
  -webkit-transform: scale(2.0);
  transform: scale(2.0);
}
img {
  height:100px;
  width: 100px;
  transition: all .2s ease-in-out;
  opacity: 0.5;
}

＆＃13;

<div>
  <p>Text</p>
  <img src="https://placeimg.com/640/480/any">
</div>

＆＃13;

如何实现缩放效果？

2 个答案: