超快速圖文互搭互動：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);

文字區塊加入半透明的底色：圖文互搭技巧

圖文互搭技巧：

文字區塊加入半透明的底色

這是文字，但背景色是透明的。

一種流動的質感，是立基於形式之中。
綠色的花舞，抹起了一絲明亮的思緒！

圖文互搭寫作是網路文本的重要特色之一。半透明的背景色，可以為文字和圖像之間，牽動了一種更為互 依的交互感受。

在這裡，我們所思考的互動模態是：滑鼠移到圖中的文字區塊，文字區塊就變底色。這一互動計設之重點，加強文字區塊背景色，讓文字區塊「斷離」於圖像的連結，讓讀者專心於文字區塊，喚醒讀者對文字的注意力。

教學影音：

<style>

.bacimg1017 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 578px;
}

.word2015101701 {
font-family: Verdana, '微軟正黑體';
font-size: 1.26em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 1em;
color: white;
}

.transcolor {
background: rgba(255, 255, 240, 0.4);
}

</style>

補充互動style

.transcolor:hover {
background: rgba(255, 255, 240, 0.9);
color: gray;
}

顏色代碼網站：click here!!

我想看更多基本說明：click here!!

2019/04/新補充內容

另一種思考模式是：
如果我們把滑鼠一移到圖片，圖片中的字就馬上會變化，
這樣的互動模態，要如何來使用css語法呢？


請看範例：

這是文字，但背景色是透明的。

一種流動的質感，是立基於形式之中。
綠色的花舞，抹起了一絲明亮的思緒！

這一效果，我們是使用了如下的互動CSS語法：

.bacimg1017:hover >div {
background: rgba(255, 255, 240, 0.9);
color: gray;
}

請直接加入<style>xxx</style>裡面。