代码之家 › 专栏 › 技术社区 › MK-DK

CSS渐变悬停在不同大小的图像上

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

我有一个网格,有20张不同的图片和不同的尺寸。网格是用引导程序生成的。在我的示例页面上,我只发布3个网格元素。我想做一个效果,所以如果一个人将鼠标悬停在图像上,效果会是这样的,但是没有按钮:

Gradient effect example

我试着把这个效果转移到我自己的图像上,但我不能使它发挥作用。有人能看到我在这里做错了什么吗?

Demo can be seen here

这是我至今为止的演示颂歌:

body {
      background-color: #f5f5f5;
    }
    /* Set width between grid elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    } 
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }
    .margin_bottom {
      margin-bottom: 10px;
    }
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    .img-responsive { 
        height: 100%;
    }
    /* Position of buttons/text in a single grid element */
    .inner-wrapper {
      text-align: center;
      background: none;
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
    }

    .bottom-left {
        position: absolute;
        text-align: left
        bottom: 8px;
        left: 16px;
    }
    /* Color on text */
    .dark-font {
      color: #333;
    }
    .light-font {
      color: #fff;
    }
   
    /* Set full width on columns */
    @media (max-width: 768px) {
      .img-responsive {
        width: 100%;
        }
      .btn-success {
        width: fit-content;
      }

    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }
    }
.image-overlay {
    position:relative;

    display:inline-block;
}
.overlay {
    position:absolute;
    transition:all .3s ease;
    opacity:0;
    transition:1.9s;
    background: #00b1bab8;
}
.image-overlay:hover .overlay {
    opacity:1;
}
.overlayFade {
  
    top:0;
    background: rgba(27, 27, 27, 0.5);

}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEMPLATE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div align="center">
                <div>
                    <div class="image-overlay">
                        <img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="img" >
                        <div class="overlay overlayFade">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-8 margin_bottom">
                    <div class="image-overlay">
                  <!-- 770x480-->
                        <img src="https://d3j0sq6zklqdqq.cloudfront.net/photos/2017/03/06/107-40070-gilmore-girls-1488831826.jpg" alt="5" class="img-responsive" />
                        <div class="overlay overlayFade"></div>
                        <div class="inner-wrapper bottom-left">
                          <h3 class="light-font">Looking for having a good time</h3>
                          <span class="light-font">Here is where you should look</span>
                            <!--<button class="btn btn-success btn-lg">Read More</button>-->
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col-sm-12 margin_bottom">
                          <!-- 430x235-->
                            <div class="image-overlay">
                                <img src="https://www.photolakedistrict.co.uk/wp-content/uploads/Daffodil-Winter-Wedding-Photo-Grasmere.jpg" alt="5" class="img-responsive" />
                                <div class="overlay overlayFade"></div>
                                <div class="inner-wrapper bottom-right">
                                <!--<button class="btn btn-success">Read More</button>-->
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 margin_bottom">
                          <!-- 430x235-->
                            <div class="image-overlay">
                                <img src="http://ercsirendelo.hu/_userfiles_/probarendelo/prevencio.jpg" alt="5" class="img-responsive" />
                                <div class="overlay overlayFade"></div>
                                <div class="inner-wrapper bottom-right">
                                <!--<button class="btn btn-success">Read More</button>-->
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

3 回复 | 直到 7 年前

Z.Dima 7 年前

.overlayFade left right bottom

.overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    /* Like this */
    bottom: 0;
    left: 0;
    right: 0;
}

Shahid Mulani 7 年前

image-overlay:hover .img-responsive {
opacity: 0.5;
}

jaydeep patel 7 年前

.overlayFade{width: 100%; height: 100%;}