นิยาย Secret Celtic RadiO > ลำดับตอนที่ #17 : 17 : Dek-D.com

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

Secret Celtic RadiO

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

อัปเดตล่าสุด 26 เม.ย. 58

` The cat โค้ดแมวๆ ●

นำโค้ดไปใช้ อย่าลืม คอมเม้น ในตอนนี้เลย
และ อย่าลืม ติดเครดิต ร้านโค้ดแมวๆ ด้วยน้า

สวัสดีจ้า

จิเขียนอะไรก็เขียนลงไปโล่ด :P

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(ใส่ยูอาแอลรูปภาพหน้ากล่อง);
background-position:50% 50%;
background-size:500px;
}

.ch-info {
 position: absolute;
 background: 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:url(ใส่ยูอาแอลรูปภาพในช่องเนื้อหาแนะนำตัว); border-radius:10px;height:170px;overflow-x:hidden;overflow-y:scroll;text-align:left;">
พิมพ์ข้อความลงไปเลยจ้า
<br/>
</div>
</center>
</div>
</div>
</li>
</ul>

แพทเทิร์นนี้สำหรับใส่ตรงส่วน (ใส่ยูอาแอลรูปภาพในช่องเนื้อหาแนะนำตัว)