画像の上にマウスホバーは、テキストを削除消えCSS + HTMLの表示テキスト

 画像の上にマウスホバーは、取り外したときに消え紹介ディスプレイのご紹介

 ロードがレンダリングを完了すると

 

それはときにマウスホバー効果をポップアップ表示します

 

 

 

 

 スタイル

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>