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: CSS3 Rotating Image Hover

Tweet