git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_hover-effects.scss

   1 /* MDB HOVER EFFECTS */\r
   2 \r
   3 // MDB Hover effects\r
   4 .view {\r
   5     overflow: hidden;\r
   6     position: relative;\r
   7     cursor: default;\r
   8     .mask,\r
   9     .content {\r
  10         width: 100%;\r
  11         height: 100%;\r
  12         position: absolute;\r
  13         overflow: hidden;\r
  14         top: 0;\r
  15         left: 0\r
  16     }\r
  17     img, video {\r
  18         display: block;\r
  19         position: relative\r
  20     }\r
  21 }\r
  22 .view .mask {\r
  23         background-attachment: fixed;\r
  24 }\r
  25 \r
  26 .full-bg-img {\r
  27     height: 100%;\r
  28     width: 100%;\r
  29     position: absolute;\r
  30     overflow: hidden;\r
  31     top: 0;\r
  32     left: 0;\r
  33 }\r
  34 \r
  35 header {\r
  36     .view {\r
  37         position: relative;\r
  38         width: 100%;\r
  39         height: auto;\r
  40         background-repeat: no-repeat;\r
  41         background-position: center center;\r
  42         background-size: cover;\r
  43     }\r
  44 }\r
  45 \r
  46 // Overlays\r
  47 .overlay {\r
  48     &:hover .mask {\r
  49         opacity: 1; \r
  50     }\r
  51     img, video {\r
  52         transition: all 0.2s linear;\r
  53     }\r
  54     .mask {\r
  55         opacity: 0;\r
  56         transition: all 0.4s ease-in-out;\r
  57     }\r
  58 }\r
  59 \r
  60 //Overlay patterns\r
  61 .pattern-1 {\r
  62     background: url(../img/overlays/01.png);\r
  63 }\r
  64 \r
  65 .pattern-2 {\r
  66     background: url(../img/overlays/02.png);\r
  67 }\r
  68 \r
  69 .pattern-3 {\r
  70     background: url(../img/overlays/03.png);\r
  71 }\r
  72 \r
  73 .pattern-4 {\r
  74     background: url(../img/overlays/04.png);\r
  75 }\r
  76 \r
  77 .pattern-5 {\r
  78     background: url(../img/overlays/05.png);\r
  79 }\r
  80 \r
  81 .pattern-6 {\r
  82     background: url(../img/overlays/06.png);\r
  83 }\r
  84 \r
  85 .pattern-7 {\r
  86     background: url(../img/overlays/07.png);\r
  87 }\r
  88 \r
  89 .pattern-8 {\r
  90     background: url(../img/overlays/08.png);\r
  91 }\r
  92 \r
  93 .pattern-9 {\r
  94     background: url(../img/overlays/09.png);\r
  95 }\r
  96 \r
  97 // Overlay masks\r
  98 // Light overlays\r
  99 .hm-blue-light .mask,\r
 100 .hm-blue-light .full-bg-img {\r
 101     background-color: rgba(3, 169, 244, 0.3);\r
 102 }\r
 103 \r
 104 .hm-red-light .mask,\r
 105 .hm-red-light .full-bg-img {\r
 106     background-color: rgba(244, 67, 54, 0.3);\r
 107 }\r
 108 \r
 109 .hm-pink-light .mask,\r
 110 .hm-pink-light .full-bg-img {\r
 111     background-color: rgba(233, 30, 99, 0.3);\r
 112 }\r
 113 \r
 114 .hm-purple-light .mask,\r
 115 .hm-purple-light .full-bg-img {\r
 116     background-color: rgba(156, 39, 176, 0.3);\r
 117 }\r
 118 \r
 119 .hm-indigo-light .mask,\r
 120 .hm-indigo-light .full-bg-img {\r
 121     background-color: rgba(63, 81, 181, 0.3);\r
 122 }\r
 123 \r
 124 .hm-cyan-light .mask,\r
 125 .hm-cyan-light .full-bg-img {\r
 126     background-color: rgba(0, 188, 212, 0.3);\r
 127 }\r
 128 \r
 129 .hm-teal-light .mask,\r
 130 .hm-teal-light .full-bg-img {\r
 131     background-color: rgba(0, 150, 136, 0.3);\r
 132 }\r
 133 \r
 134 .hm-green-light .mask,\r
 135 .hm-green-light .full-bg-img {\r
 136     background-color: rgba(76, 175, 80, 0.3);\r
 137 }\r
 138 \r
 139 .hm-lime-light .mask,\r
 140 .hm-lime-light .full-bg-img {\r
 141     background-color: rgba(205, 220, 57, 0.3);\r
 142 }\r
 143 \r
 144 .hm-yellow-light .mask,\r
 145 .hm-yellow-light .full-bg-img {\r
 146     background-color: rgba(255, 235, 59, 0.3);\r
 147 }\r
 148 \r
 149 .hm-orange-light .mask,\r
 150 .hm-orange-light .full-bg-img {\r
 151     background-color: rgba(255, 152, 0, 0.3);\r
 152 }\r
 153 \r
 154 .hm-brown-light .mask,\r
 155 .hm-brown-light .full-bg-img {\r
 156     background-color: rgba(121, 85, 72, 0.3);\r
 157 }\r
 158 \r
 159 .hm-grey-light .mask,\r
 160 .hm-grey-light .full-bg-img {\r
 161     background-color: rgba(158, 158, 158, 0.3);\r
 162 }\r
 163 \r
 164 .hm-bluegrey-light .mask,\r
 165 .hm-bluegrey-light .full-bg-img {\r
 166     background-color: rgba(96, 125, 139, 0.3);\r
 167 }\r
 168 \r
 169 .hm-black-light .mask,\r
 170 .hm-black-light .full-bg-img {\r
 171     background-color: rgba(0, 0, 0, 0.3);\r
 172 }\r
 173 \r
 174 .hm-stylish-light .mask,\r
 175 .hm-stylish-light .full-bg-img {\r
 176     background-color: rgba(62, 69, 81, 0.3);\r
 177 }\r
 178 \r
 179 .hm-white-light .mask,\r
 180 .hm-white-light .full-bg-img {\r
 181     background-color: rgba(255, 255, 255, 0.3);\r
 182 }\r
 183 \r
 184 // Strong overlays\r
 185 .hm-blue-strong .mask,\r
 186 .hm-blue-strong .full-bg-img {\r
 187     background-color: rgba(3, 169, 244, 0.7);\r
 188 }\r
 189 \r
 190 .hm-red-strong .mask,\r
 191 .hm-red-strong .full-bg-img {\r
 192     background-color: rgba(244, 67, 54, 0.7);\r
 193 }\r
 194 \r
 195 .hm-pink-strong .mask,\r
 196 .hm-pink-strong .full-bg-img {\r
 197     background-color: rgba(233, 30, 99, 0.7);\r
 198 }\r
 199 \r
 200 .hm-purple-strong .mask,\r
 201 .hm-purple-strong .full-bg-img {\r
 202     background-color: rgba(156, 39, 176, 0.7);\r
 203 }\r
 204 \r
 205 .hm-indigo-strong .mask,\r
 206 .hm-indigo-strong .full-bg-img {\r
 207     background-color: rgba(63, 81, 181, 0.7);\r
 208 }\r
 209 \r
 210 .hm-cyan-strong .mask,\r
 211 .hm-cyan-strong .full-bg-img {\r
 212     background-color: rgba(0, 188, 212, 0.7);\r
 213 }\r
 214 \r
 215 .hm-teal-strong .mask,\r
 216 .hm-teal-strong .full-bg-img {\r
 217     background-color: rgba(0, 150, 136, 0.7);\r
 218 }\r
 219 \r
 220 .hm-green-strong .mask,\r
 221 .hm-green-strong .full-bg-img {\r
 222     background-color: rgba(76, 175, 80, 0.7);\r
 223 }\r
 224 \r
 225 .hm-lime-strong .mask,\r
 226 .hm-lime-strong .full-bg-img {\r
 227     background-color: rgba(205, 220, 57, 0.7);\r
 228 }\r
 229 \r
 230 .hm-yellow-strong .mask,\r
 231 .hm-yellow-strong .full-bg-img {\r
 232     background-color: rgba(255, 235, 59, 0.7);\r
 233 }\r
 234 \r
 235 .hm-orange-strong .mask,\r
 236 .hm-orange-strong .full-bg-img {\r
 237     background-color: rgba(255, 152, 0, 0.7);\r
 238 }\r
 239 \r
 240 .hm-brown-strong .mask,\r
 241 .hm-brown-strong .full-bg-img {\r
 242     background-color: rgba(121, 85, 72, 0.7);\r
 243 }\r
 244 \r
 245 .hm-grey-strong .mask,\r
 246 .hm-grey-strong .full-bg-img {\r
 247     background-color: rgba(158, 158, 158, 0.7);\r
 248 }\r
 249 \r
 250 .hm-bluegrey-strong .mask,\r
 251 .hm-bluegrey-strong .full-bg-img {\r
 252     background-color: rgba(96, 125, 139, 0.7);\r
 253 }\r
 254 \r
 255 .hm-black-strong .mask,\r
 256 .hm-black-strong .full-bg-img {\r
 257     background-color: rgba(0, 0, 0, 0.7);\r
 258 }\r
 259 \r
 260 .hm-stylish-strong .mask,\r
 261 .hm-stylish-strong .full-bg-img {\r
 262     background-color: rgba(62, 69, 81, 0.7);\r
 263 }\r
 264 \r
 265 .hm-white-strong .mask,\r
 266 .hm-white-strong .full-bg-img {\r
 267     background-color: rgba(255, 255, 255, 0.7);\r
 268 }\r
 269 \r
 270 // Light overlays\r
 271 .hm-blue-slight .mask,\r
 272 .hm-blue-slight .full-bg-img {\r
 273     background-color: rgba(3, 169, 244, 0.1);\r
 274 }\r
 275 \r
 276 .hm-red-slight .mask,\r
 277 .hm-red-slight .full-bg-img {\r
 278     background-color: rgba(244, 67, 54, 0.1);\r
 279 }\r
 280 \r
 281 .hm-pink-slight .mask,\r
 282 .hm-pink-slight .full-bg-img {\r
 283     background-color: rgba(233, 30, 99, 0.1);\r
 284 }\r
 285 \r
 286 .hm-purple-slight .mask,\r
 287 .hm-purple-slight .full-bg-img {\r
 288     background-color: rgba(156, 39, 176, 0.1);\r
 289 }\r
 290 \r
 291 .hm-indigo-slight .mask,\r
 292 .hm-indigo-slight .full-bg-img {\r
 293     background-color: rgba(63, 81, 181, 0.1);\r
 294 }\r
 295 \r
 296 .hm-cyan-slight .mask,\r
 297 .hm-cyan-slight .full-bg-img {\r
 298     background-color: rgba(0, 188, 212, 0.1);\r
 299 }\r
 300 \r
 301 .hm-teal-slight .mask,\r
 302 .hm-teal-slight .full-bg-img {\r
 303     background-color: rgba(0, 150, 136, 0.1);\r
 304 }\r
 305 \r
 306 .hm-green-slight .mask,\r
 307 .hm-green-slight .full-bg-img {\r
 308     background-color: rgba(76, 175, 80, 0.1);\r
 309 }\r
 310 \r
 311 .hm-lime-slight .mask,\r
 312 .hm-lime-slight .full-bg-img {\r
 313     background-color: rgba(205, 220, 57, 0.1);\r
 314 }\r
 315 \r
 316 .hm-yellow-slight .mask,\r
 317 .hm-yellow-slight .full-bg-img {\r
 318     background-color: rgba(255, 235, 59, 0.1);\r
 319 }\r
 320 \r
 321 .hm-orange-slight .mask,\r
 322 .hm-orange-slight .full-bg-img {\r
 323     background-color: rgba(255, 152, 0, 0.1);\r
 324 }\r
 325 \r
 326 .hm-brown-slight .mask,\r
 327 .hm-brown-slight .full-bg-img {\r
 328     background-color: rgba(121, 85, 72, 0.1);\r
 329 }\r
 330 \r
 331 .hm-grey-slight .mask,\r
 332 .hm-grey-slight .full-bg-img {\r
 333     background-color: rgba(158, 158, 158, 0.1);\r
 334 }\r
 335 \r
 336 .hm-bluegrey-slight .mask,\r
 337 .hm-bluegrey-slight .full-bg-img {\r
 338     background-color: rgba(96, 125, 139, 0.1);\r
 339 }\r
 340 \r
 341 .hm-black-slight .mask,\r
 342 .hm-black-slight .full-bg-img {\r
 343     background-color: rgba(0, 0, 0, 0.1);\r
 344 }\r
 345 \r
 346 .hm-stylish-slight .mask,\r
 347 .hm-stylish-slight .full-bg-img {\r
 348     background-color: rgba(62, 69, 81, 0.1);\r
 349 }\r
 350 \r
 351 .hm-white-slight .mask,\r
 352 .hm-white-slight .full-bg-img {\r
 353     background-color: rgba(255, 255, 255, 0.1);\r
 354 }\r
 355 \r
 356 // Zoom\r
 357 .hm-zoom img {\r
 358     transition: all 0.2s linear;\r
 359 }\r
 360 \r
 361 .hm-zoom:hover img {\r
 362     transform: scale(1.1);\r
 363 }\r
 364 \r
 365 .hm-zoom:hover .mask {\r
 366     opacity: 1;\r
 367 }\r
 368 \r
 369 .img-overlay {\r
 370     position:relative;\r
 371     &:after {\r
 372         content: '';\r
 373         display:block;\r
 374         position:absolute;\r
 375         height:100%;\r
 376         width:100%;\r
 377         top:0;\r
 378         left:0;\r
 379         bottom:0;\r
 380         right:0;\r
 381         background:rgba(0,0,0,.17);\r
 382         transition: background 0.4s;\r
 383     }\r
 384     &:hover {\r
 385         &:after {\r
 386             background:rgba(0,0,0,.35);\r
 387         }\r
 388     }\r
 389     &.light {\r
 390         &:after {\r
 391             background:rgba(255,255,255,.17);\r
 392         }\r
 393         &:hover {\r
 394             &:after {\r
 395                 background:rgba(255,255,255,.35);\r
 396             }\r
 397         }\r
 398     }\r
 399     &.blue {\r
 400         &:after {\r
 401             background:rgba(0,145,234,.17);\r
 402         }\r
 403         &:hover {\r
 404             &:after {\r
 405                 background:rgba(0,145,234,.35);\r
 406             }\r
 407         }\r
 408     }\r
 409     &.green {\r
 410         &:after {\r
 411             background:rgba(76,175,80,.17);\r
 412         }\r
 413         &:hover {\r
 414             &:after {\r
 415                 background:rgba(76,175,80,.35);\r
 416             }\r
 417         }\r
 418     }\r
 419     &.red {\r
 420         &:after {\r
 421             background:rgba(213,0,0,.17);\r
 422         }\r
 423         &:hover {\r
 424             &:after {\r
 425                 background:rgba(213,0,0,.35);\r
 426             }\r
 427         }\r
 428     }\r
 429 }