越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 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 时背景的颜色(建议为灰色)
蓝色代码:字体的颜色(建议为黑色)
紫色代码:图片的网址
紫色代码:你要放的内容

13 comments:

  1. 真的很kamsahamnida!
    谢谢哦!!!

    ReplyDelete
    Replies
    1. 不客气、毕竟我答应过你了 =]

      Delete
  2. 对了,这个不用放网址的么?

    ReplyDelete
  3. Replies
    1. 不确定呢 ;)
      你可以自己尝试 ^&^

      -replied by Bii.

      Delete
  4. 请问这个如何弄给它像你的状态一样
    向横滑行的呢?

    ReplyDelete
  5. 图片大概要多大 ?? 每次都超过的 T^T

    ReplyDelete
    Replies
    1. 图片大小已经有写在那里了,如果超过的话,可以自己更改:

      width="270" > 改成你要的大小

      -replied by Bii.

      Delete
  6. 请问下那个BS的代码都是一个代码放在下一个代码吗?

    ReplyDelete
    Replies
    1. BS 第二个步骤的代码是放在 [/style] 的上面
      第三个步骤的代码则是将它添加在你要图片效果出现的地方的那个位置、
      比如说,你要把它添加在 sidebar,找到你的 sidebar 代码后,添加在那里就行了。

      -replied by Bii.

      Delete
  7. 请问BS怎样放网址呢?谢谢~

    ReplyDelete
    Replies
    1. 网址的代码如下:
      [a href='网址']网址名称[/a]

      把 [ ] 换成 < > 哟 :)

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。