Question

我创建了一个具有悬停效果的图像网格。当您将鼠标悬停在图像上时，它会放大。它在Safari上工作正常但是当我在谷歌浏览器上试用它时，当您将鼠标悬停在它们上而不是缩放效果时，图像会消失。我在下面提供了我的代码。

HTML：

    <body>

        <div class="message0">
            <img
                src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
            Wakeup And Makeup <img
                src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />

        </div>


        <div class="masonry">
            <div class="fader0">
                <div class="item">
                    <img
                        src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
                </div>
            </div>



            <div class="my-wrapper">
                <div class="item">
                    <a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
                        src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
                </div>
            </div>
            <div class="fader1">
                <div class="item">
                    <img
                        src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
                </div>
            </div>
            <div class="item">
                <img
                    src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
            </div>
            <div class="fader">
                <div class="item">
                    <img
                        src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
                </div>
            </div>
            <div class="item">
                <img
                    src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
            </div>
            <div class="item">
                <img
                    src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
            </div>
            <div class="my-wrapper">
                <div class="item">
                    <a href="https://twitter.com/ViperaNYC"><img
                        src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
                </div>
            </div>
            <div class="item">
                <img
                    src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
            </div>
            <div class="item">
                <div class="my-wrapper">
                    <a
                        href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
                        <img
                        src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
                    </a>
                </div>
            </div>




        </div>



    </body>

CSS：

.item img { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

.itemkat img {
 background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width:100%;

}

.grid {
  column-count: 3;

    -webkit-column-gap: -10px; /* Chrome, Safari, Opera */
    -moz-column-gap: -10px; /* Firefox */
    column-gap: -10px;
  line-height:100%;
}

.grid-item{
  background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}


.message0
{

  display:center;
  font-size:30px;
}



.my-wrapper {
  background-color: #f2f2f2;
}
.my-wrapper:hover img {

  opacity:0.2;
}


* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;

 /* margin: 0%;  /*makes left margin closer */
  overflow: hidden;
  width: 470px;
}
.item img {
  max-width: 100%; /*reduces space between images */
  overflow: hidden;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
    overflow: hidden;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);

}


.message0 {
  font-family: Brush Script MT ;
  font-size:120px;
  text-align:center;
  color:black;
  letter-spacing: 5px;
}

我提供了一个小提琴。 ***它在其他互联网浏览器上工作，但不是Google Chrome，这是问题**** https://jsfiddle.net/getMecoffee56/o11hmwek/1/

图像因悬停效果而消失

0 个答案: