直接使用代码

图片素材

css代码

 <style>
.com-arctype-name2{margin:20px 0;color:#034b54;font-size:22px;font-weight: bold;letter-spacing: 1px;}
.index-box4{padding:10px 0;margin-bottom: 30px;}
.index-box4 .box4-item .mar5{position: relative; height: 147px;background:#fff;overflow: hidden;display: block;
color:#fff}
.index-box4 .box4-item h3.box4-title{position: absolute;top:5px; left:30px; transition:margin 0.3s;display: inline-block;border-bottom:2px solid #e60012; line-height: 30px;}
.index-box4 .box4-item p.description{position: absolute;top:65px; left:30px; width:80%;font-size:14px;transition:margin 0.3s;display: none;}
.index-box4  [class^=col-],.index-box4 .row{
   padding:0;
   margin:0;
   
  }
.index-box4 .box4-item-bg2 .mar5{height:270px} 

.index-box4 .box4-item .mar5:hover{opacity: 0.9;background:#E60012}
.index-box4 .box4-item .mar5:hover img{display: none;}
.index-box4 .box4-item .mar5:hover .description{display: block;}

@media (min-width:760px){  
  
    .index-box4 .box4-item .mar5{position: relative; height: 147px;}
}
@media(min-width:1200px){
    .index-box4 .box4-item h3.box4-title{font-size:18px;top:0}
    .index-box4 .box4-item p.description{font-size:14px; margin-top:5px;top:55px}
    .index-box4 .box4-item .mar5{height: 123px;}
  
    .index-box4 .box4-item-bg2 .mar5{height:265px} 
}

</style>

HTML+JS代码

  <div class="index-box4 ">
        <div class="container">
            <div class="com-arctype-name2 text-center">应用领域</div>
            <div class="col-md-9 pm-pc">
                <div class="row">
                    <div class="col-md-7 box4-item pm-pc ">
                        <a href="http://bootfastui.com" class="mar5">
                            <img src="http://www.bootfastui.cn/img/2021/0307-4/index41.png" alt="" width="100%">
                            <h3 class="box4-title ">网络通信</h3>
                            <p class="description  ">Semiware的电路保护产品在机顶盒、路由器、基站等通讯产品领域提供更可靠的保护。</p>
                        </a>
                    </div>
                    <div class="col-md-5 box4-item pm-pc  ">
                        <a href="http://bootfastui.com" class="mar5">
                            <img src="http://www.bootfastui.cn/img/2021/0307-4/index62.png" alt="" width="100%">
                            <h3 class="box4-title">消费类电子</h3>
                            <p class="description">Semiware可为TWS蓝牙耳机、智能手表等消费类电子产品提供各种电路保护器件。</p>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 box4-item  pm-pc  ">
                        <a href="http://bootfastui.com" class="mar5">
                            <img src="http://www.bootfastui.cn/img/2021/0307-4/index63.png" alt="" height="100%">
                            <h3 class="box4-title ">安防监控</h3>
                            <p class="description ">Semiware产品广泛应用于IPC、智能门禁、楼宇对讲等安防领域。</p>
                        </a>
                    </div>
                    <div class="col-md-4 box4-item pm-pc">
                        <a href="http://bootfastui.com" class="mar5">
                            <img src="http://www.bootfastui.cn/img/2021/0307-4/index64.png" alt="" height="100%">
                            <h3 class="box4-title">电源及新能源</h3>
                            <p class="description">Semiware产品广泛应用于PD快充、开关电源、适配器等电源产品。</p>
                        </a>
                    </div>
                    <div class="col-md-4 box4-item pm-pc  ">
                        <a href="http://bootfastui.com" class="mar5">
                            <img src="http://www.bootfastui.cn/img/2021/0307-4/index65.png" alt="" height="100%">
                            <h3 class="box4-title ">照明领域</h3>
                            <p class="description ">Semiware为工业领域客户提供更可靠的保护器件及保护方案。</p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="col-md-3 pm-pc box4-item box4-item-bg2">
                <a href="http://bootfastui.com" class="mar5">
                    <img src="http://www.bootfastui.cn/img/2021/0307-4/index42.png" alt="" width="100%">
                    <h3 class="box4-title ">汽车电子</h3>
                    <p class="description ">Semiware提供广泛的高品质电路保护产品线组合，符合AEC-Q101标准，让您能够找到可满足自己特定需求的优化型解决方案。</p>

                </a>
            </div>
            <div class="clear"></div>
        </div>
    </div>