用css3实现图片悬停效果特效cid1048-代码设计

作者code


html and css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>interactive hover effect</title>
  7. <style>
  8. @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600,700,900);
  9. body {
  10. background: #dce1df;
  11. color: #4f585e;
  12. font-family: 'Source Sans Pro', sans-serif;
  13. text-rendering: optimizeLegibility;
  14. }
  15. a.btn {
  16. background: #0096a0;
  17. border-radius: 4px;
  18. box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25);
  19. color: #ffffff;
  20. display: inline-block;
  21. padding: 6px 30px 8px;
  22. position: relative;
  23. text-decoration: none;
  24. transition: all 0.1s 0s ease-out;
  25. }
  26. .no-touch a.btn:hover {
  27. background: #00a2ad;
  28. box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075);
  29. transform: translateY(-2px);
  30. transition: all 0.25s 0s ease-out;
  31. }
  32. .no-touch a.btn:active,
  33. a.btn:active {
  34. background: #008a93;
  35. box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25);
  36. transform: translate3d(0, 1px, 0);
  37. transition: all 0.025s 0s ease-out;
  38. }
  39. div.cards {
  40. margin: 80px auto;
  41. max-width: 960px;
  42. text-align: center;
  43. }
  44. div.card {
  45. background: #ffffff;
  46. display: inline-block;
  47. margin: 8px;
  48. max-width: 300px;
  49. perspective: 1000;
  50. position: relative;
  51. text-align: left;
  52. transition: all 0.3s 0s ease-in;
  53. z-index: 1;
  54. }
  55. div.card img {
  56. max-width: 300px;
  57. }
  58. div.card div.card-title {
  59. background: #ffffff;
  60. padding: 6px 15px 10px;
  61. position: relative;
  62. z-index: 0;
  63. }
  64. div.card div.card-title a.toggle-info {
  65. border-radius: 32px;
  66. height: 32px;
  67. padding: 0;
  68. position: absolute;
  69. right: 15px;
  70. top: 10px;
  71. width: 32px;
  72. }
  73. div.card div.card-title a.toggle-info span {
  74. background: #ffffff;
  75. display: block;
  76. height: 2px;
  77. position: absolute;
  78. top: 16px;
  79. transition: all 0.15s 0s ease-out;
  80. width: 12px;
  81. }
  82. div.card div.card-title a.toggle-info span.left {
  83. right: 14px;
  84. transform: rotate(45deg);
  85. }
  86. div.card div.card-title a.toggle-info span.right {
  87. left: 14px;
  88. transform: rotate(-45deg);
  89. }
  90. div.card div.card-title h2 {
  91. font-size: 24px;
  92. font-weight: 700;
  93. letter-spacing: -0.05em;
  94. margin: 0;
  95. padding: 0;
  96. }
  97. div.card div.card-title h2 small {
  98. display: block;
  99. font-size: 18px;
  100. font-weight: 600;
  101. letter-spacing: -0.025em;
  102. }
  103. div.card div.card-description {
  104. padding: 0 15px 10px;
  105. position: relative;
  106. font-size: 14px;
  107. }
  108. div.card div.card-actions {
  109. box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075);
  110. padding: 10px 15px 20px;
  111. text-align: center;
  112. }
  113. div.card div.card-flap {
  114. background: #d9d9d9;
  115. position: absolute;
  116. width: 100%;
  117. transform-origin: top;
  118. transform: rotateX(-90deg);
  119. }
  120. div.card div.flap1 {
  121. transition: all 0.3s 0.3s ease-out;
  122. z-index: -1;
  123. }
  124. div.card div.flap2 {
  125. transition: all 0.3s 0s ease-out;
  126. z-index: -2;
  127. }
  128. div.cards.showing div.card {
  129. cursor: pointer;
  130. opacity: 0.6;
  131. transform: scale(0.88);
  132. }
  133. .no-touch div.cards.showing div.card:hover {
  134. opacity: 0.94;
  135. transform: scale(0.92);
  136. }
  137. div.card.show {
  138. opacity: 1 !important;
  139. transform: scale(1) !important;
  140. }
  141. div.card.show div.card-title a.toggle-info {
  142. background: #ff6666 !important;
  143. }
  144. div.card.show div.card-title a.toggle-info span {
  145. top: 15px;
  146. }
  147. div.card.show div.card-title a.toggle-info span.left {
  148. right: 10px;
  149. }
  150. div.card.show div.card-title a.toggle-info span.right {
  151. left: 10px;
  152. }
  153. div.card.show div.card-flap {
  154. background: #ffffff;
  155. transform: rotateX(0deg);
  156. }
  157. div.card.show div.flap1 {
  158. transition: all 0.3s 0s ease-out;
  159. }
  160. div.card.show div.flap2 {
  161. transition: all 0.3s 0.2s ease-out;
  162. }
  164. </style>
  165. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  166. </script>
  167. </head>
  168. <body>
  170. <div class="cards">
  171. <div class="card">
  172. <img class="card-image" src="file/one.jpg" alt="">
  173. <div class="card-title">
  174. <a href="" class="toggle-info btn">
  175. <span class="left"></span>
  176. <span class="right"></span>
  177. </a>
  178. <h2>
  179. HOVER EFFECT
  180. <small>INTERACTIVE HOVER EFFECT</small>
  181. </h2>
  182. </div>
  184. <div class="card-flap flap1">
  185. <div class="card-description">
  186. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
  187. </div>
  188. <div class="card-flap flap2">
  189. <div class="card-actions">
  190. <a href="" class="btn">READ MORE</a>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  198. <div class="card">
  199. <img class="card-image" src="file/two.jpg" alt="">
  200. <div class="card-title">
  201. <a href="" class="toggle-info btn">
  202. <span class="left"></span>
  203. <span class="right"></span>
  204. </a>
  205. <h2>
  206. INTERACTIVE DESIGN
  207. <small>INTERACTIVE HOVER EFFECT</small>
  208. </h2>
  209. </div>
  211. <div class="card-flap flap1">
  212. <div class="card-description">
  213. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
  214. </div>
  215. <div class="card-flap flap2">
  216. <div class="card-actions">
  217. <a href="" class="btn">READ MORE</a>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  224. <div class="card">
  225. <img class="card-image" src="file/five.jpg" alt="">
  226. <div class="card-title">
  227. <a href="" class="toggle-info btn">
  228. <span class="left"></span>
  229. <span class="right"></span>
  230. </a>
  231. <h2>
  232. HOVER EFFECT
  233. <small>INTERACTIVE HOVER EFFECT</small>
  234. </h2>
  235. </div>
  237. <div class="card-flap flap1">
  238. <div class="card-description">
  239. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
  240. </div>
  241. <div class="card-flap flap2">
  242. <div class="card-actions">
  243. <a href="" class="btn">READ MORE</a>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  249. <div class="card">
  250. <img class="card-image" src="file/four.jpg" alt="">
  251. <div class="card-title">
  252. <a href="" class="toggle-info btn">
  253. <span class="left"></span>
  254. <span class="right"></span>
  255. </a>
  256. <h2>
  257. HOVER EFFECT
  258. <small>INTERACTIVE HOVER EFFECT</small>
  259. </h2>
  260. </div>
  262. <div class="card-flap flap1">
  263. <div class="card-description">
  264. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
  265. </div>
  266. <div class="card-flap flap2">
  267. <div class="card-actions">
  268. <a href="" class="btn">READ MORE</a>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  274. <div class="card">
  275. <img class="card-image" src="file/six.jpg" alt="">
  276. <div class="card-title">
  277. <a href="" class="toggle-info btn">
  278. <span class="left"></span>
  279. <span class="right"></span>
  280. </a>
  281. <h2>
  282. HOVER EFFECT
  283. <small>INTERACTIVE HOVER EFFECT</small>
  284. </h2>
  285. </div>
  287. <div class="card-flap flap1">
  288. <div class="card-description">
  289. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
  290. </div>
  291. <div class="card-flap flap2">
  292. <div class="card-actions">
  293. <a href="" class="btn">READ MORE</a>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  299. <div class="card">
  300. <img class="card-image" src="file/seven.jpg" alt="">
  301. <div class="card-title">
  302. <a href="" class="toggle-info btn">
  303. <span class="left"></span>
  304. <span class="right"></span>
  305. </a>
  306. <h2>
  307. HOVER EFFECT
  308. <small>INTERACTIVE HOVER EFFECT</small>
  309. </h2>
  310. </div>
  312. <div class="card-flap flap1">
  313. <div class="card-description">
  314. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
  315. </div>
  316. <div class="card-flap flap2">
  317. <div class="card-actions">
  318. <a href="" class="btn">READ MORE</a>
  319. </div>
  320. </div>
  321. </div>
  322. </div>
  324. </div>
  325. <script>
  327. $(document).ready(function(){
  328. var zindex = 10;
  330. $("div.card").click(function(e){
  331. e.preventDefault();
  333. var isShowing = false;
  335. if ($(this).hasClass("show")) {
  336. isShowing = true
  337. }
  339. if ($("div.cards").hasClass("showing")) {
  340. // a card is already in view
  341. $("div.card.show")
  342. .removeClass("show");
  344. if (isShowing) {
  345. // this card was showing - reset the grid
  346. $("div.cards")
  347. .removeClass("showing");
  348. } else {
  349. // this card isn't showing - get in with it
  350. $(this)
  351. .css({zIndex: zindex})
  352. .addClass("show");
  354. }
  356. zindex++;
  358. } else {
  359. // no cards in view
  360. $("div.cards")
  361. .addClass("showing");
  362. $(this)
  363. .css({zIndex:zindex})
  364. .addClass("show");
  366. zindex++;
  367. }
  369. });
  370. });
  373. </script>
  376. </body>
  377. </html>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>interactive hover effect</title>
     
     <style>
      @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600,700,900);
body {
  background: #dce1df;
  color: #4f585e;
  font-family: 'Source Sans Pro', sans-serif;
  text-rendering: optimizeLegibility;
}
a.btn {
  background: #0096a0;
  border-radius: 4px;
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  display: inline-block;
  padding: 6px 30px 8px;
  position: relative;
  text-decoration: none;
  transition: all 0.1s 0s ease-out;
}
.no-touch a.btn:hover {
  background: #00a2ad;
  box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075);
  transform: translateY(-2px);
  transition: all 0.25s 0s ease-out;
}
.no-touch a.btn:active,
a.btn:active {
  background: #008a93;
  box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25);
  transform: translate3d(0, 1px, 0);
  transition: all 0.025s 0s ease-out;
}
div.cards {
  margin: 80px auto;
  max-width: 960px;
  text-align: center;
}
div.card {
  background: #ffffff;
  display: inline-block;
  margin: 8px;
  max-width: 300px;
  perspective: 1000;
  position: relative;
  text-align: left;
  transition: all 0.3s 0s ease-in;
  z-index: 1;
}
div.card img {
  max-width: 300px;
}
div.card div.card-title {
  background: #ffffff;
  padding: 6px 15px 10px;
  position: relative;
  z-index: 0;
}
div.card div.card-title a.toggle-info {
  border-radius: 32px;
  height: 32px;
  padding: 0;
  position: absolute;
  right: 15px;
  top: 10px;
  width: 32px;
}
div.card div.card-title a.toggle-info span {
  background: #ffffff;
  display: block;
  height: 2px;
  position: absolute;
  top: 16px;
  transition: all 0.15s 0s ease-out;
  width: 12px;
}
div.card div.card-title a.toggle-info span.left {
  right: 14px;
  transform: rotate(45deg);
}
div.card div.card-title a.toggle-info span.right {
  left: 14px;
  transform: rotate(-45deg);
}
div.card div.card-title h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.05em;
  margin: 0;
  padding: 0;
}
div.card div.card-title h2 small {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
div.card div.card-description {
  padding: 0 15px 10px;
  position: relative;
  font-size: 14px;
}
div.card div.card-actions {
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075);
  padding: 10px 15px 20px;
  text-align: center;
}
div.card div.card-flap {
  background: #d9d9d9;
  position: absolute;
  width: 100%;
  transform-origin: top;
  transform: rotateX(-90deg);
}
div.card div.flap1 {
  transition: all 0.3s 0.3s ease-out;
  z-index: -1;
}
div.card div.flap2 {
  transition: all 0.3s 0s ease-out;
  z-index: -2;
}
div.cards.showing div.card {
  cursor: pointer;
  opacity: 0.6;
  transform: scale(0.88);
}
.no-touch div.cards.showing div.card:hover {
  opacity: 0.94;
  transform: scale(0.92);
}
div.card.show {
  opacity: 1 !important;
  transform: scale(1) !important;
}
div.card.show div.card-title a.toggle-info {
  background: #ff6666 !important;
}
div.card.show div.card-title a.toggle-info span {
  top: 15px;
}
div.card.show div.card-title a.toggle-info span.left {
  right: 10px;
}
div.card.show div.card-title a.toggle-info span.right {
  left: 10px;
}
div.card.show div.card-flap {
  background: #ffffff;
  transform: rotateX(0deg);
}
div.card.show div.flap1 {
  transition: all 0.3s 0s ease-out;
}
div.card.show div.flap2 {
  transition: all 0.3s 0.2s ease-out;
}

     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
     </script>
 </head>
 <body>
     
     <div class="cards">
         <div class="card">
             <img class="card-image" src="file/one.jpg" alt="">
             <div class="card-title">
                 <a href="" class="toggle-info btn">
                     <span class="left"></span>
                     <span class="right"></span>
                 </a>
                 <h2>
                  HOVER EFFECT 
                 <small>INTERACTIVE HOVER EFFECT</small>
                 </h2>
             </div>
             
             <div class="card-flap flap1">
                 <div class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
                 </div>
                 <div class="card-flap flap2">
                     <div class="card-actions">
                         <a href="" class="btn">READ MORE</a>
                     </div>
                 </div>
             </div>          
         </div>
         
         
         
          <div class="card">
             <img class="card-image" src="file/two.jpg" alt="">
             <div class="card-title">
                 <a href="" class="toggle-info btn">
                     <span class="left"></span>
                     <span class="right"></span>
                 </a>
                 <h2>
                  INTERACTIVE DESIGN 
                 <small>INTERACTIVE HOVER EFFECT</small>
                 </h2>
             </div>
             
             <div class="card-flap flap1">
                 <div class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
                 </div>
                 <div class="card-flap flap2">
                     <div class="card-actions">
                         <a href="" class="btn">READ MORE</a>
                     </div>
                 </div>
             </div>          
         </div>
         
         
          <div class="card">
             <img class="card-image" src="file/five.jpg" alt="">
             <div class="card-title">
                 <a href="" class="toggle-info btn">
                     <span class="left"></span>
                     <span class="right"></span>
                 </a>
                 <h2>
                  HOVER EFFECT 
                 <small>INTERACTIVE HOVER EFFECT</small>
                 </h2>
             </div>
             
             <div class="card-flap flap1">
                 <div class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
                 </div>
                 <div class="card-flap flap2">
                     <div class="card-actions">
                         <a href="" class="btn">READ MORE</a>
                     </div>
                 </div>
             </div>          
         </div>
         
          <div class="card">
             <img class="card-image" src="file/four.jpg" alt="">
             <div class="card-title">
                 <a href="" class="toggle-info btn">
                     <span class="left"></span>
                     <span class="right"></span>
                 </a>
                 <h2>
                  HOVER EFFECT 
                 <small>INTERACTIVE HOVER EFFECT</small>
                 </h2>
             </div>
             
             <div class="card-flap flap1">
                 <div class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
                 </div>
                 <div class="card-flap flap2">
                     <div class="card-actions">
                         <a href="" class="btn">READ MORE</a>
                     </div>
                 </div>
             </div>          
         </div>
         
          <div class="card">
             <img class="card-image" src="file/six.jpg" alt="">
             <div class="card-title">
                 <a href="" class="toggle-info btn">
                     <span class="left"></span>
                     <span class="right"></span>
                 </a>
                 <h2>
                  HOVER EFFECT 
                 <small>INTERACTIVE HOVER EFFECT</small>
                 </h2>
             </div>
             
             <div class="card-flap flap1">
                 <div class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
                 </div>
                 <div class="card-flap flap2">
                     <div class="card-actions">
                         <a href="" class="btn">READ MORE</a>
                     </div>
                 </div>
             </div>          
         </div>
         
          <div class="card">
             <img class="card-image" src="file/seven.jpg" alt="">
             <div class="card-title">
                 <a href="" class="toggle-info btn">
                     <span class="left"></span>
                     <span class="right"></span>
                 </a>
                 <h2>
                  HOVER EFFECT 
                 <small>INTERACTIVE HOVER EFFECT</small>
                 </h2>
             </div>
             
             <div class="card-flap flap1">
                 <div class="card-description">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, recusandae!
                 </div>
                 <div class="card-flap flap2">
                     <div class="card-actions">
                         <a href="" class="btn">READ MORE</a>
                     </div>
                 </div>
             </div>          
         </div>
    
     </div>
     <script>
     
     $(document).ready(function(){
  var zindex = 10;
  
  $("div.card").click(function(e){
    e.preventDefault();

    var isShowing = false;

    if ($(this).hasClass("show")) {
      isShowing = true
    }

    if ($("div.cards").hasClass("showing")) {
      // a card is already in view
      $("div.card.show")
        .removeClass("show");

      if (isShowing) {
        // this card was showing - reset the grid
        $("div.cards")
          .removeClass("showing");
      } else {
        // this card isn't showing - get in with it
        $(this)
          .css({zIndex: zindex})
          .addClass("show");

      }

      zindex++;

    } else {
      // no cards in view
      $("div.cards")
        .addClass("showing");
      $(this)
        .css({zIndex:zindex})
        .addClass("show");

      zindex++;
    }
    
  });
});
     
     
     </script>
     
     
 </body>
 </html>

在线演示? 让链接同时具备两种打开方式

获取源码: Hoverrrrr
下载数:346人次, 文件大小: 161.5 KB, 上传日期: 2020年-11 月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,888 人查阅

类似文章