; Elaine0211
HOME TUTORIALS MATERIALS LINKS FOLLOW CHATBOX

# 课程; Special Image Hover ( BS/BT )
2012/11/18 14:00 ♥ 2 SARANG(s)

Tutorials Require By Little Piano Girl.

效果如下图 -


课程开始 >>>

--------------------------------------------------

Blog Template 使用者

Step ① 登入部落格首页 > 布局 > 添加小工具 > HTML/JavaScript
Step ② 在 HTML/JavaScript 里面添加Code ⑴ / Code ⑵
Step ③ 浏览、保存.

基本版 

Code ⑴
<style type="text/css">
.img-hov{
background: #fff;
color: #000;
width: 250px;
height: 185px;
margin-top:-185px;
opacity: 0;-webkit-transition:all .5s ease-in-out;
}
.img-side:hover{
opacity:0.8;
}
</style>
<img src="图片网址" width="250" />
<div class="img-hov"><br />
<center>
内容</center>
</div>

旋转式 

Code ⑵

<style type="text/css">
.img-hov{
background: #fff;
color: #000;
width: 250px;
height: 185px;
margin-top:-185px;
opacity: 0;
-webkit-transition:all .5s ease-in-out;
}
.img-hov:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
opacity:0.8;
}
</style>
<img src="图片网址" width="250" />
<div class="img-hov"><br />
<center>
内容</center>
</div>

---------------------------------------------------

Blogskin 使用者

Step ① 登入部落格首页 > 模板 > Ctrl+F 找</style>
Step ② 在</style> 的上面添加代码 ⑴ / 代码 ⑵
Step ③ 然后在想要的地方置放代码 ⑶ Step ④ 浏览、保存. 

基本版 

代码 ⑴

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

旋转式 

代码 ⑵

.img-hov{
background: #fff;
color: #000;
width: 250px;
height: 185px;
margin-top:-185px;
opacity: 0;
-webkit-transition:all .5s ease-in-out;
}
.img-hov:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
opacity:0.8;}

代码 ⑶

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

---------------------------------------------------

Explain ::
橙色代码 ; 背景颜色 ( 建议白色/灰色 )
黄色代码 ; 字体颜色
青色代码 ; 图片的宽度
红色代码 ; 图片的高度 ( margin-top的数字要与高度一样,"-"符号别删除 )
蓝色代码 ; 透明度,数字越小就越透明
灰色代码 ; 旋转的代码,旋转角度可自行更换
紫色代码 ; 图片网址

---------------------------------------------------

这样应该明白了吧?
任何疑问可以到cbox 留言
我会尽快回复
转帖前请得到夲博主同意
并附上本部落格logo
谢谢合作 :)


标签: , ,

◁ NEWER
OLDER ▷
© 2017 Designed By Elaine0211.