Question

我在DIVI WordPRess中构建了此页面：

http://www.wilderfilms.co.uk/wp/work/

当您将鼠标悬停在图像上时，我希望缩放效果能够正常工作 - 但图像会在其div区域之外重叠。

我使用了这里的CSS代码： https://codepen.io/Remedy/pen/ZYJrpp

我的CSS代码不起作用：

.et_portfolio_image img {
    max-width: 100%;

   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}

.et_portfolio_image:hover img {
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

我使用firefox浏览器，右键单击＆gt;检查图像上的元素，以查看它被分配的类。我尝试过不同的课程，但这似乎是最接近的课程，看起来像我正在努力实现的目标。我基本上希望背景图像可以缩放，但不会像它那样重叠并保持在DIV中。

谢谢！

Answer 1

你必须添加一些如下的CSS：

private void layout() {
        toast("save");

        LayoutInflater dialoglayout = LayoutInflater.from(EditImageActivity.this);
         View dialogView = dialoglayout.inflate(R.layout.save_image_dialoge,null);

         my_dialog = new Dialog(EditImageActivity.this, R.style.CustomAlertDialog);
         my_dialog.setContentView(dialogView);
         WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
         lp.copyFrom(my_dialog.getWindow().getAttributes());
         lp.width = (int)(getResources().getDisplayMetrics().widthPixels*0.90);
         lp.height = (int)(getResources().getDisplayMetrics().heightPixels*0.90);
         my_dialog.getWindow().setAttributes(lp);
         final Button cancel = dialogView.findViewById(R.id.cancel);
         cancel.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View view) {
                 //cancel(true);
                 my_dialog.dismiss();
             }
         });
     }

Answer 2

您需要隐藏由缩放引起的任何溢出。

只需将overflow:hidden添加到.et_portfolio_image即可。

.et_portfolio_image, .et_shop_image {
    display: block;
    position: relative;
    overflow: hidden; }

Answer 3

添加此样式

.et_portfolio_image，.et_shop_image { 溢出：隐藏; }

Answer 4

感谢大家，代码工作得很完美，为了回答这篇文章，我使用了大卫的答案：

.et_portfolio_image, .et_shop_image {
    display: block;
    position: relative;
    overflow: hidden; }

谢谢，页面看起来很棒！

需要CSS帮助|悬停图片|放大效果

4 个答案: