部落格園美化相關文章目錄：

【部落格美化】01.推薦和反對炫酷樣式

【部落格美化】02.公告欄顯示個性化時間

【部落格美化】03.分享按鈕

【部落格美化】04.自定義位址列logo

【部落格美化】05.新增GitHub連結

【部落格美化】06.新增QQ交談連結

【部落格美化】07.新增打賞按鈕

【部落格美化】08.新增"擴大/縮小瀏覽區域大小" 按鈕

【部落格美化】09.評論帶頭像，且支援旋轉

【部落格美化】10.圖片預覽放大

一、背景

寫文章用到的圖片尺寸都很大，但是放到部落格裡面就顯得比較小，所以每次看圖時需要開啟新標籤頁來看大圖，有沒有什麼辦法直接在部落格裡面預覽大圖呢？有的，CSS的強大功能就可以幫助實現

二、放大預覽效果

放大一個我之前刷題小程式的圖片  為了考PMP，我做了一個刷題小程式

三、程式碼實現

看一樣CSS怎麼做到的：

#mainContent img
{
    z-index: 1000; //設定為最頂層，以免左側導航欄遮擋
    position: relative;
    cursor: pointer;//滑鼠樣式：手勢
    transition: all 1.2s; //放大的時間：1.2s
}
#mainContent img:hover {
    transform: scale(1.4); //放大倍數：1.4倍
}

 將這段程式碼貼上到 頁面定製CSS程式碼 裡面

關注公眾號：悟空聊架構，回覆pmp，領取pmp資料！回覆悟空，領取架構師資料！

作　　者：悟空聊架構 
出　　處：http://www.cnblogs.com/jackson0714/
關於作者：專注於移動開發。如有問題或建議，請多多賜教！
版權宣告：本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結。
特此宣告：所有評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我

悟空聊架構 

關注我，帶你每天進步一點點！

還有111本書籍贈送~~

&n