泪划痕
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

匿名 说...

弄不到噢~

Lynn. 说...

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

独泪 说...

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

还有 img { 也是

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

Cindy .Tan 说...

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

独泪 说...

不客气,恭喜成功 ^^

Lin 린 ♥ 说...

这个是慢慢变的吗?︿︿

独泪 说...

对啊,是慢慢变的 ^^

Sze Xin 说...

弄不到 :'(

独泪 说...

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

αн ϰιи 说...

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

独泪 说...

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

- 说...

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

stephanie 说...

怎么我弄不到 ? :'(

独泪 说...

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

stephanie
到设计 -修改HTML

CTRL+F 找 img:hover { ,

看看有没有 img:hover {

stephanie 说...

一样弄不到叻 :(

Evon Voon 说...

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

寶寶 说...

:弄不到=(

Hui 说...

做到了,謝謝

楚惠 说...

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

♥ мs ViviAn ♥ 说...

弄到了^_^

` Xiiaoyii . 说...

弄不到 TT

♥ Cδσl Zåι 尛酷仔 说...

终于弄到咯 xD
我拿咯

荟瑜 说...

抱走=D

牛奶妹 Milkluii 说...

拿走了哦 ^^ 谢谢

уёйуеи 说...

我弄不到啊 :S

nesthome 说...

弄到了!!感谢^^

两恩 说...

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

Unknown 说...

弄不到……

匿名 说...

超爱的,抱走了

可是为什么好像不会动~

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

弄到了~~谢谢~~

AhChi 说...

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

慧。 说...

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

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

ღ_Hu1 M1nღ_ 说...

怎么弄不到啊?

Jennifer (: 说...
此评论已被作者删除。
Jennifer (: 说...

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

两恩 说...

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

匿名 说...

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

Lynn 说...

弄到了~谢谢~

可芊 ♥ 说...

弄不到 :'(

蒙蒙 说...

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

Error 500
该怎么做?

匿名 说...

拿走咯,謝謝

Camille_Babe 说...

我弄不到 ><

说...

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

Ice Heart~ 说...

Take~

ms-NEKO 说...

照片没有变化耶...TT

♥Just Magz♥ 说...

拿走了 :))

匿名 说...

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

gemini 说...

拿走了:)
謝謝吖

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

拿走咯~谢谢你啊 =)

S-Suki 说...

谢谢 我会了 :)

贝霓 说...

做么弄不到的??

Unknown 说...

blogskin不能的是吗?

陈韦澌 说...

我拿了 谢啦 !!

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

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

3mily.颖儿 说...

弄到了 :))
谢谢丫 :)

Jia En 说...

拿走咯~

Xin Yu 说...

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

匿名 说...

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

Unknown 说...

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

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

发表评论