Question

我已经完成了一个网站http://www.chitarrastudio.com/，你可以在顶部看到有两把吉他，一种是经典的，一种是吉布森。

我想要实现一个效果：当鼠标悬停，吉他或其他滑动时，向上完全显示（通过点击它，有一个链接）。

简而言之，它与网站上的许多菜单效果相同：就像在这里传递“Perhier”一样。 http://www.onextrapixel.com/examples/cool-menu/

Answer 1

我不同意这里的所有答案，因为这只能用CSS完成。

img {
    position:relative;
    top:-100px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

img:hover {
    top:0;
}

小提琴：

http://jsfiddle.net/TyBHu/

Answer 2

您可以简单地使用transform属性。看看这个codepen.io pen

/* Extra */
body{
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
}
.center{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 25px;
}
.frame{
  padding: 5px;
  border: 1px solid #ff1;
  border-radius: 5px;
}
.card .title{
  text-align:center;
}

/* Hover Scroll Effect */
.frame{
  width:300px;
  height:300px;
  overflow: hidden;
}
.frame img{
  object-fit: cover;
  width:100%;
  transform: translateY(0);
  transition: 2s ease-out;
}
.frame:hover img {
  object-fit: cover;
  width:100%;
  /* Considering frame height   */
  transform: translateY(calc(-100% + 300px));
  transition: 2s ease-out;
}
/*OR */
/* .frameimg:hover{
  object-fit: cover;
  width:100%;
  transform: translateY(-100%);
  transition: 2s ease-out;
} */

/* With background image  */
.bg-image{

  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://source.unsplash.com/500x1500/);
  transition: background-position 2s ease-out;
  
}
.frame:hover .bg-image{
    background-position: 0 100%;
 }

<div class="center">
  <div class="card">
  <div class="frame">
    <img src="https://source.unsplash.com/500x1500/" alt="">
  </div>
  <div class="title">
    <h3>Made with img tag</h3>
    <p>You need to consider frame height</p>
  </div>
    </div>
    <div class="card">
      <div class="frame">
        <div class="bg-image"></div>
      </div>
      <div class="title">
        <h3>made with background image</h3>
        <p>Make <code/>background-position: 0 100%</code> on hover</p>
      </div>
    </div>
</div>

Answer 3

使用jquery尝试这样的事情：

示例：FIDDLE

<强> JS：

$(document).ready(function() {

    $("img").hover(

    function () {
        $(this).stop().animate({
            top: '0px'
        }, 'slow');
    },

    function () {
        $(this).stop().animate({
            top: '-100'
        }, 'slow');
    });

});

如何在鼠标上滚动图像？

3 个答案: