在網頁設計中，經常遇到需要在圖片上添加點擊效果的情況。比如鼠標移動到圖片上時圖片會有放大或變暗的效果，或者在點擊圖片時它會凸出來。這篇文章將會介紹如何使用 CSS 點擊圖片凸出來。

.image-container {
position: relative;
display: inline-block;
overflow: hidden;
}
.image {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.2s ease-out;
}
.image:hover,
.image:focus {
transform: scale(1.1);
z-index: 1;
outline: none;
}

首先，在 HTML 中創建圖片容器，并為它設置相對定位，用來嵌套圖片。在圖片樣式中，為它設置最大寬度、自動高度和一個過渡效果，當鼠標懸停在圖片上時，使用 CSS 的 :hover 偽類使它有放大的效果。此外還設置了一個 :focus 的樣式，用來在用戶點擊圖片時產生凸出的效果。

最后，通過使用 transform 屬性來改變圖片的比例大小，造成凸出的效果。同時，使用 z-index 屬性使圖片置于其他內容的頂部，并使用 outline 屬性去掉圖片被點擊時的虛線邊框。

總結一下，通過上面的代碼，我們可以輕松地實現點擊圖片凸出來的效果。希望這篇文章對你有所幫助！