Question

与Patagonia（http://www.patagonia.com/）类似，在主页图像顶部有一个摄像头图标，当您将鼠标悬停在图标上时会弹出一个文本框。我曾尝试使用Patagonia的html和css，但我搞砸了某个地方。现在我没有看到图标或文本框。之前我确实看过其中一个，但它们显示在主页图像下方，而悬停没有做任何事情。我的css：

`
    photo-caption-icon, .photo-icon {
        z-index: 100;
        font-size: 200%;
        color: #bddadb;
    }

    .home-img .photo-caption {
        bottom: 40px;
    }

     .glyphicon, .photo-caption-icon, .photo-icon {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .photo-caption-text {
        position: absolute;
        bottom: 0;
        right: -7px;
        z-index: 3;
        width: 200px;
        padding: 0px 30px 10px 10px;
        border-radius: 5px;
        background-color: rgba(255,255,255,.65);
        transition: .5s ease;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
         visibility: hidden;
        transition: opacity .2s, visibility .2s;
    }

    .home-img__wrap {
          position: relative;
          height: 200px;
          width: 257px;
     }


    .img__wrap:hover .img__description {
          visibility: visible;
          opacity: 1;
    }

    .photo-caption {
        position: absolute;
        bottom: 20px;
        right: 50px;
        color: black;
    }

    .image-slider li {
        display: table-cell;
        position: relative;
        list-style: none;
        overflow: hidden;
    }
`

my html:
`
    <div class="home-img"><img class="aligncenter wp-image-288 size-full"     src="https://radicalurge.com/wp-content/uploads/2018/03/Brigid-with-jewlery-1.jpg" alt="model wearing Radical Urge logo t-shirt" width="100%" />


    <div class="photo-caption photo-credits" style="display:block"> 
    <span class="photo-caption-icon" style="display:block;"> </span>

    <span class="photo-caption-text" >
Brigidlynn Cappelletti  /  Metalsmith</span>
    </div></div>
`

如何让图标保持在主页图像上方，然后如何让悬停在该图标上显示文本框？

家庭图像上的图形不会在悬停

0 个答案: