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 menyebarkan 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 instruksi 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 sobat Sobat, kemudian pada instruksi 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 instruksi dibawah ini dan pastekan pada content yang tersedia.

<div id="screen">
<!-- Backstage Controlls -->
<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 instruksi <a href="URL Tujuan"> sebelum icon surat dan dua icon lainnya.

Semoga bermanfaat!



Sumber http://www.websiteedukasi.com/