小编Mar*_*rek的帖子

在悬停时div内的缩放图像

我希望得到这样的效果:

假设如下:

在鼠标中心(左侧平铺)之前,必须缩小图像,使照片的上边缘等于边框(!)
悬停后,照片会缩小,图像的上边缘始终与边框对齐并显示.下面的照片是白色背景,产品名称和价格(如图所示)
无论照片的大小如何,框架的高度必须始终相同

有什么问题:我不知道如何使每张照片适合不同屏幕宽度的帧宽

我的代码:

jQuery(document).ready(function($) {

  var $zdjecie = $('.woocommerce ul.products li.product img');

  $('.woocommerce ul.products li.product').hover(
    function() {
      $(this).find('img').css({
        'transform': 'scale(1)',
        'top': '0',
        'position': 'relative'
      });
    },
    function() {
      $(this).find('img').css({
        'transform': 'scale(1.6, 1.5)',
        'top': '',
        'position': 'relative'
      });
    })
})

Run Code Online (Sandbox Code Playgroud)

//the height of frame is different regardless of screen wide
.woocommerce ul.products li.product a img {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  transform: scale(1.6, 1.5);
  top: 60px; // here may be problem
  position: relative;
  -webkit-transition: transform 0.4s …

Run Code Online (Sandbox Code Playgroud)

html css jquery css-transitions

Mar*_*rek

2017 06-02

3
推荐指数

1
解决办法

2113
查看次数