Pure CSS to achieve the text description of semi-transparent effect when the mouse is placed on it (must read for novices)

The effect is as follows:

Example 1

Example 2: Taking Example 1 [Wedding Planning] as an example

HTML:

<div class="itemInWorks" >
   Wedding Planning
       Status: To be completed<br>
       Executor: Zhang San<br>
       Deadline: 2020/03/15
   </div>
</div>

CSS:

/*Outer div part*/
.itemInWorks{
    width: 180px;
    height: 130px;
    border-radius:5px;/*rounded corners*/
    font-size: 18px;
    font-weight: 600;
    color: dimgrey;
    text-align: center;/*The text "Wedding Planning" is horizontally centered*/
    line-height: 50px;/*The text "Wedding Planning" is vertically centered*/
    background: url('image/works_image/4.jpg');
    background-repeat: no-repeat;
    background-size: 180px 130px;
    box-shadow: #909090 0px 0px 10px;/*surrounding shadow*/
    /*The above is customized according to personal effect*/
    overflow: hidden;
    position: relative;
}
/*semi-transparent part*/
.itemInWorks .mask{
    height:80px;
    width:172px;
    color: #f5f1e5;
    line-height: 23px;
    text-align: left;
    padding-left: 8px;
    border-radius:2px 2px 5px 5px;
    font-size: 14px;
    font-weight: 300;
    /*The above is customized according to personal effect*/
    position: absolute;
    top:130px;/*When the mouse is not released, the distance between the highest point of the semi-transparent part and the top of the outer div*/
    background-color:rgba(0,0,0,0.5);/*transparency*/
    transition:top 0.5s ease-in-out;/*Change the top property, complete in 0.5 seconds, start slowly and end slowly*/
}
.itemInWorks:hover .mask{
    top:50px ;/*When the mouse is placed on the top, the distance from the top of the outer div to the highest point of the slide*/
}

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .itemInWorks{
        width: 180px;
        height: 130px;
        border-radius:5px;
        font-size: 18px;
        font-weight: 600;
        color: dimgrey;
        text-align: center;
        line-height: 50px;
        background: url('image/works_image/4.jpg');
        background-repeat: no-repeat;
        background-size: 180px 130px;
        box-shadow: #909090 0px 0px 10px;
        overflow: hidden;
        position: relative;
    }
    /*semi-transparent part*/
    .itemInWorks .mask{
        height:80px;
        width:172px;
        color: #f5f1e5;
        line-height: 23px;
        text-align: left;
        padding-left: 8px;
        border-radius:2px 2px 5px 5px;
        font-size: 14px;
        font-weight: 300;
        position: absolute;
        top:130px;
        background-color:rgba(0,0,0,0.5);
        transition:top 0.5s ease-in-out;
    }
    .itemInWorks:hover .mask{
        top:50px ;
    }
</style>
<body>
<div class="itemInWorks" >
    Wedding Planning
        Status: To be completed<br>
        Executor: Zhang San<br>
        Deadline: 2020/03/15
    </div>
</div>
</body>
</html>

Summarize

The above is the editor's introduction to the pure CSS text description of how to achieve a translucent effect when the mouse is placed on the screen (a must-read for novices). I hope it will be helpful to everyone!

<<: How to quickly build an LNMP environment with Docker (latest)

>>: The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked