Advertisement
Guest User

No Working Effect

a guest
Apr 25th, 2019
170
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.33 KB | None | 0 0
  1. .hovereffect {
  2. width: 100%;
  3. height: 100%;
  4. margin-block-end: 15%;
  5. float: center;
  6. overflow: hidden;
  7. position: relative;
  8. text-align: center;
  9. cursor: default;
  10. }
  11.  
  12. .hovereffect .overlay {
  13. width: 65%;
  14. height: 100%;
  15. overflow: hidden;
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. }
  20.  
  21. .hovereffect img {
  22. margin-left: 38%;
  23. display: block;
  24. position: relative;
  25. }
  26.  
  27. .hovereffect h2 {
  28. text-transform: uppercase;
  29. color: #fff;
  30. text-align: center;
  31. font-size: 17px;
  32. padding: 10px;
  33. }
  34.  
  35. .hovereffect:hover h2 {
  36. opacity: 0;
  37. filter: alpha(opacity=0);
  38. -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
  39. transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
  40. }
  41.  
  42. .hovereffect a.info {
  43. display: inline-block;
  44. text-decoration: none;
  45. padding: 7px 14px;
  46. text-transform: uppercase;
  47. color: #fff;
  48. border: 1px solid #fff;
  49. margin: 50px 0 0 0;
  50. background-color: transparent;
  51. }
  52.  
  53. .hovereffect a.info:hover {
  54. box-shadow: 0 0 5px #fff;
  55. }
  56.  
  57. .hovereffect hr {
  58. width: 40%;
  59. opacity: 0;
  60. filter: alpha(opacity=0);
  61. border: 1px solid #FFF;
  62. }
  63.  
  64. .hovereffect hr:nth-child(3) {
  65. -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);
  66. transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,90deg) scale3d(0,0,1);
  67. }
  68.  
  69. .hovereffect hr:nth-child(4) {
  70. -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,180deg) scale3d(0,0,1);
  71. transform: translate3d(-50%,-50%,0) rotate3d(0,0,1, 180deg) scale3d(0,0,1);
  72. }
  73.  
  74. .hovereffect h2, .hovereffect hr {
  75. position: absolute;
  76. top: 50%;
  77. left: 75%;
  78. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  79. transition: opacity 0.35s, transform 0.35s;
  80. -webkit-transform: translate3d(-50%,-50%,0);
  81. transform: translate3d(-50%,-50%,0);
  82. -webkit-transform-origin: 50%;
  83. -ms-transform-origin: 50%;
  84. transform-origin: 50%;
  85. background-color: transparent;
  86. margin: 0px;
  87. }
  88.  
  89. .set1, .set2 {
  90. left: 75%;
  91. position: absolute;
  92. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  93. transition: opacity 0.35s, transform 0.35s;
  94. -webkit-transform: translate3d(-50%,-50%,0);
  95. transform: translate3d(-50%,-50%,0);
  96. -webkit-transform-origin: 50%;
  97. -ms-transform-origin: 50%;
  98. transform-origin: 50%;
  99. background-color: transparent;
  100. margin: 0px;
  101. padding: 0px;
  102. }
  103.  
  104. .set1 {
  105. top: 40%;
  106. }
  107.  
  108. .set2 {
  109. top: 60%;
  110. }
  111.  
  112. .hovereffect p {
  113. width: 30%;
  114. text-transform: none;
  115. font-size: 15px;
  116. line-height: 2;
  117. }
  118.  
  119. .hovereffect p a {
  120. color: #fff;
  121. }
  122.  
  123. .hovereffect p a:hover,
  124. .hovereffect p a:focus {
  125. opacity: 0.6;
  126. filter: alpha(opacity=60);
  127. }
  128.  
  129. .hovereffect a i {
  130. opacity: 0;
  131. filter: alpha(opacity=0);
  132. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  133. transition: opacity 0.35s, transform 0.35s;
  134. padding: 10px;
  135. font-size: 20px;
  136. }
  137.  
  138. .set1 a:first-child i {
  139. -webkit-transform: translate3d(-60px,-60px,0);
  140. transform: translate3d(-60px,-60px,0);
  141. }
  142.  
  143. .set1 a:nth-child(2) i {
  144. -webkit-transform: translate3d(60px,-60px,0);
  145. transform: translate3d(60px,-60px,0);
  146. }
  147.  
  148. .set2 a:first-child i {
  149. -webkit-transform: translate3d(-60px,60px,0);
  150. transform: translate3d(-60px,60px,0);
  151. }
  152.  
  153. .set2 a:nth-child(2) i {
  154. -webkit-transform: translate3d(60px,60px,0);
  155. transform: translate3d(60px,60px,0);
  156. }
  157.  
  158. .hovereffect:hover hr:nth-child(3) {
  159. opacity: 1;
  160. filter: alpha(opacity=100);
  161. -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);
  162. transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-90deg) scale3d(1,1,1);
  163. }
  164.  
  165. .hovereffect:hover hr:nth-child(4) {
  166. opacity: 1;
  167. filter: alpha(opacity=100);
  168. -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);
  169. transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-180deg) scale3d(1,1,1);
  170. }
  171.  
  172. .hovereffect:hover .set1 i:empty, .hovereffect:hover .set2 i:empty {
  173. -webkit-transform: translate3d(0,0,0);
  174. transform: translate3d(0,0,0);
  175. opacity: 1;
  176. filter: alpha(opacity=100);
  177. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement