นิยาย Z i c m a . C o d e & L a b e l > ลำดับตอนที่ #7 : ` โค้ด ♔ กลมซ้อนกลม ชี้แล้วมีข้อความขึ้น! : Dek-D.com

ลำดับตอนที่ #7

ลำดับตอนที่ #7 : ` โค้ด ♔ กลมซ้อนกลม ชี้แล้วมีข้อความขึ้น!

อัปเดตล่าสุด 29 พ.ค. 60

❝ Z i c m a C o d e & L a b e l ⁹
f o r. A l l . Code type
D e s i g n . 15 / 03 / 14

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

ไม่รู้มีใครแจกโค้ดนี้รึยัง แต่เท่าที่ส่องเด็กดีมาก็นานนม
ลิยังไม่เคยเห็นใครแจกเลยน้าาาา ><
ดังนั้นก็เลยมาแจกฮร้าาาา

ใส่ข้อความที่นี่

- COPY CODE -

.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(ใส่ url รูป);
background-position:50% 50%;
background-size:500px;
}

.ch-info {
 position: absolute;
 background: url(ใส่ url รูป) D9E8FC;background-position:50% 50%;
 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 {
 opacity: 1;
}</style>
<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img">
			<div class="ch-info">
				<center>
					<div style="margin-top: 80px; width: 270px; background-image: url(http://4.bp.blogspot.com/-D02-ZXrZuVU/TulVh1l88UI/AAAAAAAACWU/ktMgYgBnbN0/s1600/bodybg.gif); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding: 5px; text-align: center; background-position: initial initial; background-repeat: initial initial;">
						ใส่ข้อความที่นี่</div>
				</center>
			</div>
		</div>
	</li>
</ul>
<br />
<br />
<br />
<br />

นำไปใช้อย่าลืมให้เครดิต
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -