CSS + HTML display text when the mouse hovers over the image, the text disappears when removed

 Introduction of the display when the mouse hovers over the image, introduce disappear when removed

 When loading is completed renderings

 

That pops up when the mouse hover effect

 

 

 

 

 style

html,
            body {
                height: 100%;
            }
            
            #div1 {
                width: 1110px;
                height: 530px;
                border: 3px solid pink;
                overflow: hidden;
                position: absolute;
            }
            
            #div2 {
                margin-right: -30px;
                margin-bottom: -30px;
                overflow: auto;
            }
            
            .box {
                position: relative;
                width: 350px;
                height: 250px;
                margin: 0 30px 30px 0;
                background-size: 100% 100%;
                float: left;
            }
            .box img{
                width: 350px;
                height: 250px;
            }
            
            .box:hover .details {
                display: block;
            }
            
            .text {
                position: absolute;
                bottom: 0px;
                width: 100%;
                line-height: 30px;
                background-color: rgba(0, 0, 0, 0.3);
            }
            
            .blank {
                float: left;
                width: 80px;
                background-color: transparent;
                height: 30px;
            }
            
            .h3 {
                float: left;
                width: 140px;
                text-align: center;
                color: #ffffff;
            }
            
            .details {
                color: #FFFFFF;
                display: none;
            }
            
            .price {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 90px;
                background-color: rgba(0, 0, 0, 0.3);
                color: white;
            }
            
            .price div {
                height: 30px;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                margin: auto;
            }

View Code

 

HTML

<div id="div1">
            <div id="div2">
                <div class="box" >
                    <img src="img/123.jpg"/>
                    <div class="text">
                        <div class="blank"></div>
                        <div class="h3">
                            <h3>铂金假日酒店</h3>
                            <p class="details">
                                假日酒店遍布全美国高速公路可以通达的每个地方，并走向全世界，从而使假日酒店集团成为世界上第一家
                            </p>
                        </div>
                        <div class="price">
                            <div>￥399/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/5f1.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>吉安国际酒店</h3>
                            <p class="details">
                                吉安国际酒店是集餐饮、旅业、会议、休闲娱乐为一体的吉安唯一涉外综合型商务酒店
                            </p>
                        </div>
                        <div class="price">
                            <div>￥699/起</div>
                        </div>
                    </div>
                </div>
                <div class="box" >
                    <img src="img/91.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>杭州逸大酒店</h3>
                            <p class="details">
                                杭州逸酒店地处市中心区域，距西湖仅10分钟车程，毗邻历史悠久的武林广场。
                            </p>
                        </div>
                        <div class="price">
                            <div>￥1298/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/a32.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>香格里拉大酒店</h3>
                            <p class="details">
                                香格里拉酒店集团便不断向国际迈进；以香港为大本营，今日香格里拉已是大的豪华酒店
                            </p>
                        </div>
                        <div class="price">
                            <div>￥788/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/e0.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>企鹅酒店</h3>
                            <p class="details">
                                长隆企鹅酒店，紧邻海洋王国主题公园；主题客房数量达2000间，拥有难得一见的企鹅馆
                            </p>
                        </div>
                        <div class="price">
                            <div>￥899/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/e500.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>南油大酒店</h3>
                            <p class="details">
                                珠海南油大酒店坐落于风景秀丽的水湾路地段，交通便利，距吉大商业中心及情侣路仅百米之遥。
                            </p>
                        </div>
                        <div class="price">
                            <div>￥999/起</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>