泪划痕
Best viewed in Google Chrome

2011年11月5日星期六

模糊or清晰图片在鼠标指向后的转变

注意上图的黑色鼠标,就是原本模糊or清晰的图片在鼠标指向后变成清晰or模糊

第一步骤
登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 ]]></b:skin>


第二步骤
在 ]]></b:skin> 上面 添加以下 一款代码
第一款:清晰图片在鼠标指向后变成模糊图片

img{
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

img:hover{
-webkit-transition-duration: .5s;
filter: alpha(opacity=75);
moz-opacity:.75;
opacity:.75;
}
第二款:模糊图片在鼠标指向后变清晰图片

img{
filter: alpha(opacity=75);
moz-opacity:.75;
opacity:.75;
}
img:hover{
-webkit-transition-duration: .5s;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

添加了后就会像下图红框
预览+保存模板。

62 道泪痕:

啊♥飘 说...

怎么我都弄不到的 :(

独泪 说...

唔,因为你没保存代码在模板呀 o_0

xiiao liing 说...

弄不到噢~

Milky ♥ 说...

想問下你的"第一步驟"和"第二步驟"有那個shadow是怎樣弄的 ?

独泪 说...

xiiao liing
你的博客已经有个 img:hover { 了
直接 CTRL+F找 img:hover {
在它下面paste 那个模糊or清晰的code 就行了 :)

还有 img { 也是

Milky ♥
嗯,等下代码paste在你博客,这里放不到代码

ÇîηП Μūïî (星妤) 说...

弄到了嗯、谢你的教程吖·· <3

独泪 说...

不客气,恭喜成功 ^^

Herself ♥ 说...

这个是慢慢变的吗?︿︿

独泪 说...

对啊,是慢慢变的 ^^

Thera 说...

弄不到 :'(

独泪 说...

不过在你博客看到你成功了 o.0,你随便指向一个图片看

αн ϰιи 说...

有没有指了会有一些透明的图案在那边的??

独泪 说...

唔,透明的图案在那边?不大明白,出现在图片里面的吗

夏乐_weI 说...

我弄到了~ ^^
谢谢你,独泪

stephanie 说...

怎么我弄不到 ? :'(

独泪 说...

夏乐_weI
不客气,恭喜成功^^

stephanie
到设计 -修改HTML

CTRL+F 找 img:hover { ,

看看有没有 img:hover {

stephanie 说...

一样弄不到叻 :(

yvonne babyy 说...

独泪~有没有慢动作的?
模糊~然后指着照片慢慢变清楚~

宝宝、 说...

:弄不到=(

♥蕙♥ 说...

做到了,謝謝

楚惠 说...

成功了~~\(≧▽≦)/~啦啦啦

♥ мs ViviAn ♥ 说...

弄到了^_^

` ..禁 ɔ 说...

弄不到 TT

ت╰♥っ▪ ▫▪°сδσじzåι ت 尛酷仔 ▪▫▪╭♥っ人 不 犯 我,我 不 犯 人 说...

终于弄到咯 xD
我拿咯

荟瑜 说...

抱走=D

♥ 牛奶妹 ♥ 说...

拿走了哦 ^^ 谢谢

уёйуеи 说...

我弄不到啊 :S

靖靌 说...

弄到了!!感谢^^

两恩 说...

可是我按了CTRL+F是有一个小框框,可是要怎么找img:hover { ??
用taip吗??也不可以耶=((

筱布♥♡布丁 说...

弄不到……

Micky 说...

超爱的,抱走了

可是为什么好像不会动~

♡——越简单越幸福——♡ 说...

弄到了~~谢谢~~

I'm Ah Ci :) 说...

我拿走了哦,,,
但是我弄不到哦,,,

慧。 说...

这个效果我弄到,可是为什么只有贴子里的图片才有这个效果?
就好像gadget部分的图片都不会有这个效果的。
就算我用其他html也是会这样的。
为什么会这样?:))

其实不是你给的的html的问题。
只是想问你要怎么解决这个问题。:]]

ღ_Hu1 M1nღ_ 说...

怎么弄不到啊?

小玲 说...
此评论已被作者删除。
小玲 说...

弄不到勒~
CTRL+F 找 img:hover { 了
也是没有哦~

两恩 说...

请问要怎么弄它圆角+清晰图片在鼠标指向后变成模糊图片??
谢谢=DD

CHarY 说...

啊!!谢谢你、我弄到了^^

Lynn 说...

弄到了~谢谢~

Bernice 可芊 ♥ 说...

弄不到 :'(

Bevina Low Winshan 说...

如果它出现More than one widget was found with id: HTML11. Widget IDs should be unique.

Error 500
该怎么做?

Tenq Tinq 说...

拿走咯,謝謝

xiiao . T [ MR .T ] 说...

我弄不到 ><

说...

原本弄到了的,可是做么突然间没有了?我看来看去都没有少什么可是就是没有?==

Cassandra 说...

Take~

ms-NEKO 说...

照片没有变化耶...TT

♥Just Magz♥ 说...

拿走了 :))

♥Xiao-Ying♥ 说...

我去ctrl+F找 ]]> 怎样我的没有的???

黎兒 说...

拿走了:)
謝謝吖

xiiaomomo 说...
此评论已被作者删除。
momo xiiao 说...

拿走咯~谢谢你啊 =)

S-Suki 说...

谢谢 我会了 :)

贝霓 说...

做么弄不到的??

Weng Yan 说...

blogskin不能的是吗?

陈韦澌 说...

我拿了 谢啦 !!

I'm__XiiaoQii❤♥●•٠·˙ 说...

怎样啊?怎么我都弄不到@@
大家帮帮我啊

晓晓颖 说...

弄到了 :))
谢谢丫 :)

Ivy Hor Jia En 说...

拿走咯~

Xin Yu 说...

怎么我找不到那个code /.\

Xiiao Qii 说...

請問有新的版本的嗎 ? blogger update 了 , 我按【修改HTML】不像以前了的

小靖靖 说...

为什么我去设计 修改html
thn ctrl F
出现了一个小格子
我paste img:hover { 下去 旁边出现一个 红色highlight的 0 of 0
为什么呢???

其他的也是一样哦..
我觉得是我的找错地方了??
信息中心我找不到设计哦 T^T
救命

发表评论