首頁>Program>source

我正在尝試實現以下目標:

当我將滑鼠悬停在圖片上時,我想在深色圖片上加上一些文字和圖標。

我被困在這裏.我找到了一些教程,但對於這種情况他们没有解決。 另外,還有一个問题-每个圖像都有不同的高度.宽度始终相同。

如何實現這種效果?

最新回復
  • 5月前
    1 #

    您可以通過以下簡單的CSS / HTML来實現:

    .image-container {
        position: relative;
        width: 200px;
        height: 300px;
    }
    .image-container .after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        color: #FFF;
    }
    .image-container:hover .after {
        display: block;
        background: rgba(0, 0, 0, .6);
    }
    

    HTML

    <div class="image-container">
        <img src="http://lorempixel.com/300/200" />
        <div class="after">This is some content</div>
    </div>
    
    演示:http://jsfiddle.net/6Mt3Q/

    UPD :這是一个不錯的最终演示,帶有一些其他樣式.

    .image-container {
        position: relative;
        display: inline-block;
    }
    .image-container img {display: block;}
    .image-container .after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        color: #FFF;
    }
    .image-container:hover .after {
        display: block;
        background: rgba(0, 0, 0, .6);
    }
    .image-container .after .content {
        position: absolute;
        bottom: 0;
        font-family: Arial;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
    }
    .image-container .after .zoom {
        color: #DDD;
        font-size: 48px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -30px 0 0 -19px;
        height: 50px;
        width: 45px;
        cursor: pointer;
    }
    .image-container .after .zoom:hover {
        color: #FFF;
    }
    
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="image-container">
        <img src="http://lorempixel.com/300/180" />
        <div class="after">
            <span class="content">This is some content. It can be long and span several lines.</span>
            <span class="zoom">
                <i class="fa fa-search"></i>
            </span>
        </div>
    </div>
    

  • 5月前
    2 #

    您可以為此使用偽元素,並將圖像悬停在上面:

    .image {
      position: relative;
      height: 300px;
      width: 300px;
      background: url(http://lorempixel.com/300/300);
    }
    .image:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transition: all 0.8s;
      opacity: 0;
      background: url(http://lorempixel.com/300/200);
      background-size: 100% 100%;
    }
    .image:hover:before {
      opacity: 0.8;
    }
    
    <div class="image"></div>
    

  • 5月前
    3 #

    有點晚了,但是当搜尋叠加方法時,该執行緒会在Google中顯示為最高結果。

    您可以簡單地使用 background-blend-mode

    .foo {
        background-image: url(images/image1.png), url(images/image2.png);
        background-color: violet;
        background-blend-mode: screen multiply;
    }
    

    它的作用是拍摄第二张圖像,然後通過使用乘法混合模式將其与背景颜色混合,然後使用螢幕混合模式將第一张圖像与第二圖像和背景颜色混合.您可以使用16種不同的混合模式来實現任何叠加。

    相乘,螢幕,覆盖,變暗,變亮,减淡,變色,強光,柔光,差異,排除,色調,饱和度,颜色和亮度。

  • git:gitignore忽略所有檔案,然後遞迴允许* foo
  • 將JSON字元串轉換為Javascript中的JSON物件陣列