教程 | Miracle Image Hover (BT/BS)

- Tutorial requested by Cindy -

这是我之前设计的页面 navigator =]

Blog Template 使用者

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<style type="text/css">

.img-side{ 

background: #E8E6E6; 

color: #000;

width: 270px; 

height: 185px; 

margin-top:-185px;

opacity: 0; 

-webkit-transition:all .5s ease-in-out; }

.img-side:hover{

opacity:.7

}

</style>

<img src="图片网址" width="270" />

<div class="img-side"><br />

<center>

内容

</center>

</div>

3. 保存即可。

Blogskin 使用者
1. 模板 → 修改 HTML

2. 寻找代码 </style>，在 </style> 上面添加以下代码：

.img-side{
background: #E8E6E6;
color: #000;
width: 270px;
height: 185px;
margin-top:-185px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.7
}

3. 之后，在你要添加小工具（此图片效果）的地方，添加以下代码：

<img src="图片网址" width="270" />
<div class="img-side"><br />
<center>
内容</center>
</div>

4. 预览看看，若没有问题，即可保存。

小解释
红色代码：hover 时背景的颜色（建议为灰色）
蓝色代码：字体的颜色（建议为黑色）
紫色代码：图片的网址
紫色代码：你要放的内容