HomeArchives for 04/16/16

Animated Book Covers


Memasang Kode Animated Book Covers
Login ke akun blog klik tombol blog baru, buat satubuah link baru  
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini :
Get Blank Template    
edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles"> 
.animated-promos, .animated-promos li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.animated-promos li {
  float: left;
}
.animated-promos a {
  display: block;
}
.animated-promos li {
  position: relative;
  margin-right: 60px;
}
.animated-promos .book-cover {
  position: relative;
  z-index: 10;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos .promo-disc {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 93px;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos a:hover .promo-disc, .animated-promos a:focus .promo-disc {
  transform: translate(20px, 0px) rotate(320deg);
}
.animated-promos a:hover .book-cover, .animated-promos a:focus .book-cover {
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
}
.book-cover {
  border: 10px solid #fff;
}
body {
  background-color: #cecece;
  padding: 20px;
}
a {
  color: #a20000;
}
/* clearfix */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
.clearfix {
  display: block;
}
/* extra for Safari */
.clearfix {
  *height: 1%;
}
/* trigger hasLayout for IE6 + 7*/
</style>

<ul class="animated-promos clearfix">
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover3-klein.png" alt="First book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Book #1</h3>
  </a>
 </li>
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover2-klein.png" alt="Second book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Another hillarious book</h3>
  </a>
 </li></ul>
<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>
Penjelasan :
Untuk memodifikasi kode tersebut tambahkan kode Outer di bawah ini :
.outer
{
 width:150px;
 height:220px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:1px 1px 5px #111;}
/*end Outer*/
#topbar .Mys2010 {  
  code-modification: Mys #2010;
}
Terapkan di atas kode </style> kemudian tambahkan kode teks 3D 
h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #fff;
  color: #F0FFF0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
Terapkan di bawah Kode 
#topbar .Mys2010 {  
  code-modification: Mys #2010;
}
Selanjutnya hapus semua Kode yang berwarna putih
ganti dengan kode di bawah ini, terapkan di bawah kode  </style>
<h1 class="otto">
BOOK COVERS
</h1>
<center>
<div id="topbar">
<table  border"2px solid">
<tr><td>
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</td><td> 
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</table>
<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>
Untuk melihat hasil klik pratinjau dan untuk penyimpanan klik perbarui selesai
Source Code by. Jens Grochtdreis 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW
If you want to directly copy and paste you canDownload Here Animated Book Covers

Category:

CSS3 Rotating Image Hover

Memasang Gambar dengan effect hover
Menampilkan gambar dan gambar akan menampilkan Link Title  ketika cursor menyentuh gambar tersebut, berikut cara penerapannya : Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru HTML dan klik simpan selesai. Untuk penerapan gunakan Kode Blank Template
<style>
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:    0px 0;
  position: fixed;
  top:  0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 90%); 
}

*{    margin:0px;
 padding:0px;}
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib77D3CtqUisVw8uiyCwAtt97g6U8X9MlVJiVyL0ESz0K9HU-DVkWP0Ha1KAEt2TELgTV-kNhDBFfe_MLc0UNpPmm_xM6SpZ7Y-q6_mkJr_SywJRNTsPWBJ2DLkcgDGtEHUGhwjGRZF1vn/s1600-r/pSGRMWg.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family:Arial, Helvetica, sans-serif;
 }
.container{
 width:85%;
 min-height:500px;
 margin:0px auto;
 padding:0px; 
}
header
{
 width:100%;
 height: 45px;
 float:left;
 text-align:center;
 margin-top: 0px;
}
.text
{
 font-size:46px;
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 text-shadow:-1px 2px 1px #999;
 font-weight:bolder;
 line-height:50px;
 padding: 0px;
 color:rgba(51,0,102,1);
}
section
{
 width:100%;
 float:left;
 height:auto;
}
h3
{
 padding: 0px;
 font-size:24px;
 color:#fff;
 font-weight:bold;
 font-family:cursive, sans-serif, serif; 
}p{
 color:#fff;
 font-size:14px;
 padding:0px  0px;
 
}img{
 width:100%;
 height:100%;
 background-size:contain;
}
button
{
 opacity:1;
 width:100px;
 height:30px;
 background-color:#000;
 border:none;
 outline:none;
 color:#fff;
}
.outer
{
 width:250px;
 height:250px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:0px 0px 5px #000;
}
.hvr-rotate
{
 width:100%;
 height:100%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 position:relative;
}
.mask-rotate
{
 content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,0.40);
  opacity:0;  
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-align:center;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
 transform: rotate(100deg); /* div rotate by 100 deg*/
 /* -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  -webkit-transform: rotate(100deg);*/
  text-align:center;
  backface-visibility: hidden;
}
.drop
{
 top:150px;
 left:65px;
 position:absolute;
 transform: translateZ(0);
 opacity:1;
 backface-visibility: hidden;
}
.hvr-rotate:hover .mask-rotate
{
 opacity:1;
  transform: rotate(0deg); /* default*/
 /*
 ******** These are prefix for different Browsers*********
 
  -moz-transform: rotate(10deg); // Mozilla
  -ms-transform: rotate(10deg);  // Microsoft Internet Explored
  -o-transform: rotate(10deg);  // Opera
  -webkit-transform: rotate(10deg);  // Chrome and Safari */ 
}
button:hover
{
 background-color:rgba(255,0,0,1);
}
</style>

<center>
<p class="text">
Image Hover Effects</p>
<table  border"2px solid">
<tr><td>
<section>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnFoYkLOSxUuvnV8wgOFdcqsDgxCFhIC2y5OhSuoOOIXNl6-X6zYwCJ0-gIPEg0nRzmcoH5Fn_rCTPGEHdp1S0jZ1fXKoqw2byur8t4BfmTtEeBO6PzLPFJ2HkxPo1J_aq47StKTID878/s1600-r/yayang5.jpg" >
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 1</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yJgYZ5fzM507tQQZ3Ngqi4j6DQ0aBFP0OaYhyzosbCqAY3flDmiXQgf6c3WbkvtUL8oYjovsSjLdbfDLcXhMmTifleWUVwjupjZoi7P_Iaw-_iRX1p6ImNd04wbSzcbTV7zW7O5SQk_e/s1600-r/yayang6.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 2</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3rLZP0G-_MkGbG2KtNJpmKt27OcM-idU1GD1awonCT1sIV1UexUpGzF2kjGOwvIjdH4DwMMRZKYgkqB6DZUdQIwg2DYQlZXXwTa22VWDgl4OHv1CySeTwEtDM7mMyXOXspUqEgk7715iM/s1600-r/yayang5.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 3</button>
</div>
</div>
</div>
</table>
<table><table  border"2px solid">
<tr><td>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4qjTjZ0DdNRt9yz4mwJA94-3qgzJZlMHYqFj7D-l191xsg82NrIeRbgvzdCIksU6mcpxG6E9r5mN0HBKka1Z7bWbSM160u04bgrP2Kp4aG0KJzYQdiXBf3pXg7NDCTNzL0N-MEqfLNMS/s1600-r/yayang3.jpg">
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 1</button>
</div>
</div>
</div>
</td><td>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTko9b20oD3_wZLsBpRs1t5sE_60VUi6Z0JCamv4G85Rhpfs40MZ2iB_LEHRzhdT7f13cjQZN6wl-VHqIA4HyrxHgKdtTK88Yugu-SVjdXy2BvTczvHTEHwB66rG-KllBL0f3UsiCRzwdt/s1600-r/yayang2.jpg">
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 2</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJ003GlC_uFrusbhMqHRfZ6HVRyB5qYqBFw8J6fb1KK-hRbTe7ZVmIcLp0FZQ-bY_vla5iHhf0i5nSwIx5rHHvkbho5jtWPkeE7_ZfTAlcGdwtEu-LgauTKTzh0fauez9DH-JAFC3kx1Z/s1600-r/yayang1.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 3</button>
</div>
</div>
</div>
</section>
</div>
</table>

<header> 
<div class="Top Title Header">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Rotating-Image-Hovers-Mys2010.css"title="Myscript2010s"><font size="1" color="orange"face="arial"> <b>DOWNLOAD FULL CODE</b>
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/2016/01/rotating-image-hover.html" target="_blank" title="Rotating Image Hover">
<h2>
ROTATING IMAGE HOVER EFFECTS</2></a>  
</div>

Source Code by. Phpludhiana 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW
If you want to directly copy and paste you canDownload Here Rotating Image Hover

Category:
Subscribe to: Posts (Atom)