教程tutorial♥//Circle Hover Effect

目前没人放这教学 , 代码添加的地方是自己研究出来了 , 所以转请奉上连接 !! 否则我认为是抄袭 ! 谢谢合作 :)

• 
  Hello xD

它就是 Circle Hover Effect 啦 :D

第一

- 登入博客 > 自定义 > 修改HTML > 继续 

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

第二

然后在 ]]></b:skin> 上面添加以下的代码。

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}
.ch-grid:after {
 clear: both;
}
.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
.ch-img{
 background-image: url(背景Direct Link);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
 position: absolute;
 background:url(背景Direct Link);
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-backface-visibility: hidden;
}
.ch-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.ch-item:hover .ch-info p {

第三

按保存。

第四

布局 > 添加小工具 > 添加以下代码

<ul class="ch-grid"><li>
<div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top: 80px;">
<br />
文字
</div>
</center>
</div>
</div>
</li>
</ul>

第五

按保存。

解释
红色 - 背景图片网站
橙色 - 你要写的字

有什么问题留言吧 ;)

ENG

at present nobody put this tutorial, the place to add the code to their own research out, so turn please enclose a connection!! Otherwise, I think it is plagiarism! Thank you for your cooperation :)

①

Login > Template > Edit HTML 

Press CTRL + F find ]]></b:skin>

②

at upside add the code.

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}
.ch-grid:after {
 clear: both;
}
.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
.ch-img{
 background-image: url(Background Direct Link);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
 position: absolute;
 background:url(Background Direct Link);
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-backface-visibility: hidden;
}
.ch-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.ch-item:hover .ch-info p {

③

Press save . 

④

Layout > Add a Gadget > Add the following code.

<ul class="ch-grid"><li>
<div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top: 80px;">
<br />
word
</div>
</center>
</div>
</div>
</li>
</ul>

 ⑤

Press save . 

Explanation
Red - Background Direct Link
Orange - Write the word

What problem leave a message ;)