Cara Menciptakan Daftar Kontak Photo Preview Dengan Css

Cara Membuat Daftar Kontak Photo Preview dengan CSS Hallo Sobat, berjumpa kembali di Blog tips dan triknya Aak. Kali ini Aak akan mengembangkan tips dan trik membuat Daftar Kontak Photo Preview dengan CSS.

Pada Daftar Kontak ini kabar baiknya selain menciptakannya memakai properti CSS, kabar baik lainnya Sobat dapat dengan gampang mengatur untuk memasukkan daftar teman-teman Sobat. Daftra kontak ini dilengkapi dengan fitur Photo Preview, apabila gambar atau foto diklik maka akan menampilkan gambar atau poto seutuhnya.

Demo CODE

Bagaimana apakah Sobat tertari, bila demikian berikut ini langkah-langkahnya :

Silahkan buka Editor Template, kemudian Sobat buke Editor Template kemudian salin isyarat dibawah ini dan Pasangkan sebelum atau diatas kode ]]></b:skin>

#screen {
position: absolute;
width: 23em;
height: 39em;
max-width: 100%;
overflow-x: hidden;
}

input {
position: absolute;
visibility: hidden; /**/
}

#background {
position: absolute;
width: 102%;
height: 100%;
background-size: cover;
background-position: center;
-webkit-filter: blur(3px);
z-index: 0;
}

label {
position: absolute;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
}

.item {
position: relative;
float: left;

width: 100%;
height: 6em;
padding: 1px 0;

background-color: rgba(0,0,0,.6); /**/
z-index: 3;
overflow: hidden;
-webkit-transition: background-color .7s;
}

.portrait {
position: relative;
float: left;

height: 3em;
width: 3em;

border-radius: 50%;

margin: 1.5em;

background-size: cover;
}
.portrait:after {
content: ' ';
position: absolute;
top: -.3em;
left: -.3em;

height: 3.5em;
width: 3.5em;

border: 1px solid rgba(255,255,255, .5);
border-radius: 50%;
-webkit-transition: border .3s;
}

.details {
position: relative;
float: left;
top: 0;

width: 55%;
margin: 1em 0 0 .75em;

-webkit-transition: top .5s;
}

.name,
.description {
position: relative;
float: left;
clear: left;
margin: 0;
}

.name {
font-size: 1.5em;
font-weight: 300;
}
.description {
font-size: .9em;
color: rgba(255,255,255, .8);
}

.actions {
position: absolute;
top: 7em;

width: 100%;

}
.actions > div {
font-family: Entypo;
font-size: 2.1em;

position: absolute;
width: 25%;

color :transparent;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: #fff;

cursor: pointer;
}
.actions > div:nth-child(2) {
left: 30%;
}
.actions > div:nth-child(3) {
left: 60%;
}
.actions > div:nth-child(4) {
left: 90%;
}

.actions > div:hover {
-webkit-text-stroke-width: 0;
color: #fff !important;
}

.info {
font-size: 100% !important;
}
.info:after {
font-size: 1.7em;
content: 'i';
font-family: Consolas !important;

color: #fff;
-webkit-text-stroke-width: 0;

border: 1px solid #fff;
border-radius: 50%;
padding: 2px 11px;
}
.info:hover:after {
background-color: rgba(255,255,255, .2);
}

/* Genreal Interaction */
.item:hover > .portrait:after {
border: 1px solid rgba(116,226,21, 1);
box-shadow: 0 0 3px rgba(116,226,21, .5);
}

input:checked + .item {
background-color: rgba(0,0,0, .3); /**/
padding-top: 0px;
border-top: 1px solid rgba(255,255,255, .1);
border-bottom: 1px solid rgba(0,0,0, .5);
}

input:checked + .item > .details {
top: -6em;
z-index: 2;
}

/* Local Details */

#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}
#Isikan Nama kontak {
background-image: url(URL Photo/Gambar);
}

/* Local Interactions */
#contact-1:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-2:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-3:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-4:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-5:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-6:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-7:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-8:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-9:checked #background {
background-image: url(URL Photo/Gambar);
}
#contact-10:checked #background {
background-image: url(URL Photo/Gambar);
}

Penjelasan :
#Isikan Nama kontak dengan nama daftar sahabat Sobat, kemudian pada isyarat URL Photo/Gambar dibagian atas dan bawah isikan dengan URL Photo/Gambar yang sama.

Selanjutnya Anda meuju Layout/Tata Letak, kemudian klik add Gadget, kemudian pilih HTML/Javascript. Kemudian Sobat copy isyarat dibawah ini dan pastekan pada content yang tersedia.

<div id="screen">

<input id="contact-1" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="chris-lacy">
</div>
<div class="details">
<div class="name">
Chris Lacy</div>
<div class="description">
Developer</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-1"></label>
</div>

<input id="contact-10" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Mara">
</div>
<div class="details">
<div class="name">
Mara Mascaro</div>
<div class="description">
Video Editor</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-10"></label>
</div>

<input id="contact-2" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="marq">
</div>
<div class="details">
<div class="name">
Marques Brownlee</div>
<div class="description">
Producer</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-2"></label>
</div>

<input id="contact-3" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Neila">
</div>
<div class="details">
<div class="name">
Neila Rey</div>
<div class="description">
Fitness Community</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-3"></label>
</div>

<input id="contact-4" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Tim">
</div>
<div class="details">
<div class="name">
Tim O'Reilly</div>
<div class="description">
CEO, O'Reilly Media</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-4"></label>
</div>

<input id="contact-9" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Ana">
</div>
<div class="details">
<div class="name">
Ana Svanadze</div>
<div class="description">
Patriot</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-9"></label>
</div>

<input id="contact-5" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Ross">
</div>
<div class="details">
<div class="name">
Derek Ross</div>
<div class="description">
Systems Administrator</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-5"></label>
</div>

<input id="contact-6" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Richard">
</div>
<div class="details">
<div class="name">
Richard Branson</div>
<div class="description">
Founder of Virgin Group</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-6"></label>
</div>

<input id="contact-7" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="George">
</div>
<div class="details">
<div class="name">
George Takei</div>
<div class="description">
Come on</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-7"></label>
</div>

<input id="contact-8" name="contatcs" type="radio" />
<div class="item">
<div class="portrait" id="Beaufort">
</div>
<div class="details">
<div class="name">
François Beaufort</div>
<div class="description">
Happiness Evangelist</div>
<div class="actions">
<div class="mail">
✉</div>
<div class="text">
</div>
<div class="call">
📞</div>
<div class="info">
</div>
</div>
</div>
<label for="contact-8"></label>
</div>

<div id="background">
</div>
</div>

Penjelasan :
Sobat dapat Menambahkan link pada icon mail, text, call dan info. Caranya tambahkan isyarat <a href="URL Tujuan"> sebelum icon surat dan dua icon lainnya.

Semoga bermanfaat!

Cara Menciptakan Daftar Kontak Photo Preview Dengan Css

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel