jquery滑鼠移過出現翻頁效果及文字說明線上演示及原始碼 ~ 哈拉999 互動式創意網頁設計

演示範例如下

貓與滑鼠
很奇怪這天還是下雨，還好有下雨過路的病人也分不出臉上的淚水。 Details

我不是老鼠
很奇怪這天還是下雨，還好有下雨過路的病人也分不出臉上的淚水。 Details

貓與老鼠
很奇怪這天還是下雨，還好有下雨過路的病人也分不出臉上的淚水。 Details

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>

a.btn:hover {
 border-color: #476788;
 color: #fff;
 background-color: #38AFE5;
 
}

.boxes>div {
 position: relative;
}

.boxes figure figcaption{
 background-color: #193149;
 position: absolute;
 top: 0;
 font-size: 13px;
 line-height: 19px;
 color: #cbc6c6;
 text-align: left;
 left: 0;
 height: 100%;
 width: 183px;
 padding: 0 11px;
 opacity: 0;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: rotateY(-90deg);
 -moz-transform: rotateY(-90deg);
 -o-transform: rotateY(-90deg);
 transform: rotateY(-90deg);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
 -o-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
 transition: transform 0.4s, opacity 0.1s 0.3s;
    -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
}

figcaption h3 {
 color: #ffffff;
 text-align: center;
 padding-top: 10px;
 font-size: 28px;
 margin-bottom: 18px; 
 font-family: 'Open Sans Condensed', sans-serif;*/標題大小及位置
}

figcaption a.btn {
 display: block;
 float: right;
 margin-top: 56px;*/按鈕高低位置
 margin-right: 4px;
}

.boxes figure div {
 overflow: hidden;
}

.boxes figure {
 -webkit-perspective: 1700px;
 -moz-perspective: 1700px;
 -ms-perspective: 1700px;
 -o-perspective: 1700px;
  perspective: 1700px;    
    -webkit-perspective-origin: 0 50%;
    -moz-perspective-origin: 0 50%;
    -ms-perspective-origin: 0 50%;
    -o-perspective-origin: 0 50%;
    perspective-origin: 0 50%;
 background-color: #193149;
}

.boxes figure img {
 position: relative;
 transition: 0.5s ease;
 -o-transition: 0.5s ease;
 -webkit-transition: 0.5s ease;
}

.boxes figure:hover img {
 -webkit-transform: translateX(25%);
 -moz-transform: translateX(25%);
 -ms-transform: translateX(25%);
 transform: translateX(25%);
}

.boxes figure:hover figcaption {
 opacity: 1;
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -o-transform: rotateY(0deg);
 transform: rotateY(0deg);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s;
 -o-transition: -moz-transform 0.4s, opacity 0.1s;
 transition: transform 0.4s, opacity 0.1s;
}

figure{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;margin-top:0px;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 12px;
 margin-right: 5px;

}
.grid_4 img{
width:315px;height:377;*/圖片大小
}
</style>

</head>

<body>

<div class="boxes">
  <div class="grid_4">
     <figure>
      <div><img src="http://goo.gl/EdOuhG" alt=""></div>
      <figcaption>
       <h3>貓與滑鼠</h3>
       很奇怪這天還是下雨，還好有下雨過路的病人也分不出臉上的淚水 。
       <a href="" class="btn">Details</a>
      </figcaption>
     </figure>
    </div>
    <div class="grid_4">
     <figure>
      <div><img src="http://goo.gl/EdOuhG" alt=""></div>
      <figcaption>
       <h3>我不是老鼠</h3>
      很奇怪這天還是下雨，還好有下雨過路的病人也分不出臉上的淚水 。
       <a href="" class="btn">Details</a>

</figcaption>
     </figure>
    </div>
    <div class="grid_4">
     <figure>
      <div><img src="http://goo.gl/EdOuhG" alt=""></div>
      <figcaption>
       <h3>貓與老鼠</h3>
        很奇怪這天還是下雨，還好有下雨過路的病人也分不出臉上的淚水 。
       <a href="" class="btn">Details</a>
      </figcaption>
     </figure>
    </div>
    
    </div>
</body>
</html>

猛甲茶道

哈拉999

哈拉999 互動式創意網頁設計

2013年11月25日星期一