這邊記錄一下，我的Bootstrap作品集中有用到的技巧，不然都忘到爆XDD
Bootstrap作品集
紀錄在index.html頁面中，使用的當滑入時，照片會從模糊變成清楚
你可以看到，這邊的範例，總由四個部分所組成
- 最外面的區塊 content
- 蓋在區塊上的薄膜 cover
- 區塊中的文字 text
- 區塊中的圖片 content_img
第一區塊 content
首先，我們最外面的區域我是故意用a連結使用，用意是模擬，
如果今天要點及這個區塊來連動其他頁面的時候，就需要a連結。
在這個a連結裡面我們先設定好它的寬度和高度。
接著，還為它設入overflow:hidden的特性，這個特性後面會說明為什麼要它。
第二區塊 cover
第一
這個區域是蓋在整體區塊上方的薄膜。
我們利用定位的效果加入position:absolute, top:0, right:0, bottom:0, left:0。
為得是要讓這個區塊能夠完全展開覆蓋住父元素.content。
第二，我們為它加z-index:1，因為，它要蓋在上方，並在文字下方，所以，設為1是ok的。
第三，加入filter:blur(5px);，讓它產生模糊的效果。
第四，我們為它加入transform:translateY(-400px)，為得是要讓它的區塊先位在整體區塊的-400px位置，
並在你滑入的時候，transform:translateY(0px)，會改成0px，所以，就有從上方往下方移入的效果。
第三區塊 content_img
第一
這個區域是蓋在整體區塊上方的薄膜。
我們利用定位的效果加入position:absolute, top:0, right:0, bottom:0, left:0。
為得是要讓這個區塊能夠完全展開覆蓋住父元素.content。
第二，加入nackground-image加入你想要的背景圖片。
第三，加入background-position: center center; 和 background-size: cover; 來讓背景圖片回到正中央。
第四，加入filter:blur(5px);，讓它產生模糊的效果。
第五，它的hover效果，這邊就可以知道為什麼要在.content區塊中加入overflow:hidden的原因，
因為，如果你沒有加這一行的效果的話，這個背景圖片會直接超出父元素的範圍，但這不是我們要的，所以，要加這個語法，來解決這個狀況。
第三區塊 text
最後一個文字部分
第一，加入z-index:3; 讓它這個區塊覆蓋在最上方。
第二，writing-modex: vertical-rl; 讓整個字是垂直方式撰寫。
第三，我們為它加入transform:translateY(-400px)，為得是要讓它的區塊先位在整體區塊的-400px位置，
並在你滑入的時候，transform:translateY(0px)，會改成0px，所以，就有從上方往下方移入的效果。
那經過以上的步驟就可以達成以上範例的效果囉。
那如果你希望它從左邊或右邊或下面飛進父元素的話，就只要調整transform:translateY 或 transform:translateX 的效果就可以囉。