Display
or over image on :hover

前端 未结 1 567
半阙折子戏
半阙折子戏 2020-12-09 21:45

I\'m looking for a method that would allow a div or span element to appear over a image when you :hover over that image. I\'m able to

1条回答
  •  一生所求
    2020-12-09 22:15

    Similarly to this answer I gave, you could absolutely position the .overlay element relative to the parent element and give it a height and width of 100% this should work for all img sizes given that the parent element will be inline-block (it's the same size as its containing elements).

    EXAMPLE HERE

    HTML Structure:

    The content to be displayed on :hover

    General CSS:

    Hide the .overlay element by default, and use the selector .image:hover .overlay to change the styling on hover. Due to the HTML structure, this works well because .overlay is a descendant element. You can therefore avoid using the the general/adjacent sibling combinators +, ~. Box-sizing is used to calculate the element's dimensions with respect to border, padding.. etc.

    .image {
        position:relative;
        display:inline-block;
    }
    .overlay {
        display:none;
    }
    .image:hover .overlay {
        width:100%;
        height:100%;
        background:rgba(0,0,0,.5);
        position:absolute;
        top:0;
        left:0;
        display:inline-block;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    
        /* All other styling - see example */
    
        img {
            vertical-align:top; /* Default is baseline, this fixes a common alignment issue */
        }
    }
    

    0 讨论(0)
提交回复
热议问题