html-css

悬停操作效果：

代码实现：

html：

<div id="juzhong">
        <div id="t">
            <img src="./images/logo.png" />
        </div>
        
        <div class="yi blue">立即购买 T1</div>
        
        <div class="yi kuang">补购保修服务</div>
        <div class="yi">应用下载</div>
        <div class="yi zaixian">在线商城</div>
        <div class="yi">SmartisanT1</div>
        <div class="yi">首页</div>
</div>

css：

#juzhong{
	width:1120px;
	height:100px;
	/*border:1px solid white;*/
	margin-left:auto;
	margin-right:auto;
	
	}

#t{
	width:161px;
	height:69px;
	/*border:1px solid white;*/
	margin-top:30px;
	float:left;
	
	}
	
.blue{
	color:white;
	 background-color:blue;
	 border-radius:10px; 
	overflow:hidden;
	}
	
.yi{
	width:85px;
	height:28px;
	/*border:1px solid white;*/
	float:right;
	font-size:14px;
	margin-top:35px;
	margin-left:15px;
	color:#fff;
	opacity:0.7;
	text-align:center;
	line-height:28px;
	-webkit-transition:opacity 1s ease;
	}
	
.zaixian{
	color:#fff;
	opacity:1;
	}
	
.kuang{
	color:white;
	opacity:1;
	border:1px solid #414345;
	border-radius:10px; 
	overflow:hidden;
	-webkit-transition:opacity 1s ease;
	}
.yi:hover{
	
	opacity:1;
	}
	
.kuang:hover{
	border:1px solid white;
	}
	
.blue:hover{
	background:#fff;
	color:black;
	}

阴影效果：

代码实现：

html：

<div class="" id="shangpin">
       <div class="item" id="">
           <img src="./images/earphone.jpg"/>
           <div class="item-con">
           <p>￥699.00</p>
           <p>JBL E40BT头戴式无线蓝牙耳机</p>
            </div>
            <div class="neiyinying"></div>
      </div>
  </div>

css：

#shangpin{
	width:1128px;
	height:961px;
	/*border:1px solid black;*/
	margin:40px auto;
	border-radius:20px; 
	overflow:hidden;
	
	background-color:white;
	
	}
	
.item{
	width:375px;
	height:320px;
	border:1px solid #F3F0F0;
	
	float:left;
	margin-left:-1px;
	margin-top:-1px;
	
	position:relative;
	}
	
.neiyinying{
	width:375px;
	height:320px;
	
	position:absolute;
	left:0px;
	bottom:0px;
	-webkit-transition:all 1.5s ease;
	}
	
.neiyinying:hover{
	  box-shadow: 0 0 38px #DBD7D7 inset;
	  z-index:200;
	}
	
.item-con{
	font-size:16px;
	position:absolute;
	left:20px;
	bottom:30px;
	}