Cara Membuat 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 berbagi tips dan trik membuat Daftar Kontak Photo Preview dengan CSS.

Pada Daftar Kontak ini kabar baiknya selain menciptakannya menggunakan properti CSS, kabar baik lainnya Sobat bisa dengan mudah 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, jika demikian berikut ini langkah-langkahnya :

Silahkan buka Editor Template, kemudian Sobat buke Editor Template lalu salin kode 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 teman Sobat, kemudian pada kode URL Photo/Gambar dibagian atas dan bawah isikan dengan URL Photo/Gambar yang sama.

Selanjutnya Anda meuju Layout/Tata Letak, lalu klik add Gadget, kemudian pilih HTML/Javascript. Kemudian Sobat copy kode 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 bisa Menambahkan link pada icon mail, text, call dan info. Caranya tambahkan kode <a href="URL Tujuan"> sebelum icon surat dan dua icon lainnya.

Semoga bermanfaat!

Bagikan Artikel ini