CSS是一種用于美化網頁的樣式表語言。在CSS中，我們可以為照片添加熱點，讓用戶在鼠標懸停或點擊照片的特定區域時，顯示相關信息或執行特定操作。

/* 添加熱點 */
img {
	position: relative;
}
img:hover::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
}
img:hover::after:hover {
	width: 100px;
	height: 100px;
	background-color: rgba(255, 255, 255, 0.5);
}
img:hover::before {
	content: "點擊查看詳情";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	cursor: pointer;
}

以上代碼是一個簡單的照片熱點示例。首先，通過設置img元素的position屬性為relative，為熱點的絕對定位提供基準。然后，在img元素的:hover偽類中，使用偽元素::after來添加懸停效果的熱點。通過設置content屬性為空字符串，使熱點顯示為空白，再設置position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)，將熱點定位到img元素的中心位置。此外，還設置了熱點的寬高、圓角以及背景顏色和透明度。

在熱點的:hover狀態下，通過設置熱點的寬高和背景顏色，使熱點擴大并變暗，為用戶提供更明顯的指示。同時，還使用偽元素::before來添加點擊事件的提示文字，使用戶知道該區域可以進行點擊操作。通過設置content屬性為"點擊查看詳情"，再設置text-align: center、font-size: 18px、color: #fff和text-shadow屬性，使提示文字居中、具有良好的可讀性和視覺效果。

總的來說，通過以上CSS代碼，我們可以為照片添加簡單的熱點效果，提升用戶的交互體驗。當然，具體的熱點效果還可以根據實際需求進行靈活調整。