1. 程式人生 > >經過圖片時新增透明邊框

經過圖片時新增透明邊框

效果圖
在這裡插入圖片描述
html部分程式碼:

	         <div>
	    			<img src="img/pic.jpg"/>
	    	 </div>

css部分程式碼:

            div{
				height: 150px;
				width: 150px;
				position: relative;
			}
			div:hover::after{
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border: 10px solid rgba(255,255,255,0.6);
				box-sizing: border-box;
			}