超快速圖文互搭互動：CSS hover

超快速的圖文互搭互動技能：CSS hover

那是一家我常去的
供應德國風味的
餐廳。

油油的香腸，泛著天花板的黃色燈光，
彷若一種暫時的時空置換。

沈思，可以配飯！

影音教學：

<style>
.word2015102301 {
width: 520px;
height: 347px;

font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.6;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;

border-bottom: 1px solid darkorange;
}

</style>

可以產生互動的CSS：

.word2015102301:hover {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px;

webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-o-transition: 1s all linear;
-ms-transition: 1s all linear;
transition: 1s all linear;

}

增強功能的CSS：

/* 字體顏色 */
color: white;

/* 邊框 */
border: 1px solid darkorange;

/* 圓角框 */
border-radius: 25px;

/* 旋轉 */
-webkit-transform: rotate(-2deg);