--- /dev/null
+/* MDB HOVER EFFECTS */\r
+\r
+// MDB Hover effects\r
+.view {\r
+ overflow: hidden;\r
+ position: relative;\r
+ cursor: default;\r
+ .mask,\r
+ .content {\r
+ width: 100%;\r
+ height: 100%;\r
+ position: absolute;\r
+ overflow: hidden;\r
+ top: 0;\r
+ left: 0\r
+ }\r
+ img, video {\r
+ display: block;\r
+ position: relative\r
+ }\r
+}\r
+.view .mask {\r
+ background-attachment: fixed;\r
+}\r
+\r
+.full-bg-img {\r
+ height: 100%;\r
+ width: 100%;\r
+ position: absolute;\r
+ overflow: hidden;\r
+ top: 0;\r
+ left: 0;\r
+}\r
+\r
+header {\r
+ .view {\r
+ position: relative;\r
+ width: 100%;\r
+ height: auto;\r
+ background-repeat: no-repeat;\r
+ background-position: center center;\r
+ background-size: cover;\r
+ }\r
+}\r
+\r
+// Overlays\r
+.overlay {\r
+ &:hover .mask {\r
+ opacity: 1; \r
+ }\r
+ img, video {\r
+ transition: all 0.2s linear;\r
+ }\r
+ .mask {\r
+ opacity: 0;\r
+ transition: all 0.4s ease-in-out;\r
+ }\r
+}\r
+\r
+//Overlay patterns\r
+.pattern-1 {\r
+ background: url(../img/overlays/01.png);\r
+}\r
+\r
+.pattern-2 {\r
+ background: url(../img/overlays/02.png);\r
+}\r
+\r
+.pattern-3 {\r
+ background: url(../img/overlays/03.png);\r
+}\r
+\r
+.pattern-4 {\r
+ background: url(../img/overlays/04.png);\r
+}\r
+\r
+.pattern-5 {\r
+ background: url(../img/overlays/05.png);\r
+}\r
+\r
+.pattern-6 {\r
+ background: url(../img/overlays/06.png);\r
+}\r
+\r
+.pattern-7 {\r
+ background: url(../img/overlays/07.png);\r
+}\r
+\r
+.pattern-8 {\r
+ background: url(../img/overlays/08.png);\r
+}\r
+\r
+.pattern-9 {\r
+ background: url(../img/overlays/09.png);\r
+}\r
+\r
+// Overlay masks\r
+// Light overlays\r
+.hm-blue-light .mask,\r
+.hm-blue-light .full-bg-img {\r
+ background-color: rgba(3, 169, 244, 0.3);\r
+}\r
+\r
+.hm-red-light .mask,\r
+.hm-red-light .full-bg-img {\r
+ background-color: rgba(244, 67, 54, 0.3);\r
+}\r
+\r
+.hm-pink-light .mask,\r
+.hm-pink-light .full-bg-img {\r
+ background-color: rgba(233, 30, 99, 0.3);\r
+}\r
+\r
+.hm-purple-light .mask,\r
+.hm-purple-light .full-bg-img {\r
+ background-color: rgba(156, 39, 176, 0.3);\r
+}\r
+\r
+.hm-indigo-light .mask,\r
+.hm-indigo-light .full-bg-img {\r
+ background-color: rgba(63, 81, 181, 0.3);\r
+}\r
+\r
+.hm-cyan-light .mask,\r
+.hm-cyan-light .full-bg-img {\r
+ background-color: rgba(0, 188, 212, 0.3);\r
+}\r
+\r
+.hm-teal-light .mask,\r
+.hm-teal-light .full-bg-img {\r
+ background-color: rgba(0, 150, 136, 0.3);\r
+}\r
+\r
+.hm-green-light .mask,\r
+.hm-green-light .full-bg-img {\r
+ background-color: rgba(76, 175, 80, 0.3);\r
+}\r
+\r
+.hm-lime-light .mask,\r
+.hm-lime-light .full-bg-img {\r
+ background-color: rgba(205, 220, 57, 0.3);\r
+}\r
+\r
+.hm-yellow-light .mask,\r
+.hm-yellow-light .full-bg-img {\r
+ background-color: rgba(255, 235, 59, 0.3);\r
+}\r
+\r
+.hm-orange-light .mask,\r
+.hm-orange-light .full-bg-img {\r
+ background-color: rgba(255, 152, 0, 0.3);\r
+}\r
+\r
+.hm-brown-light .mask,\r
+.hm-brown-light .full-bg-img {\r
+ background-color: rgba(121, 85, 72, 0.3);\r
+}\r
+\r
+.hm-grey-light .mask,\r
+.hm-grey-light .full-bg-img {\r
+ background-color: rgba(158, 158, 158, 0.3);\r
+}\r
+\r
+.hm-bluegrey-light .mask,\r
+.hm-bluegrey-light .full-bg-img {\r
+ background-color: rgba(96, 125, 139, 0.3);\r
+}\r
+\r
+.hm-black-light .mask,\r
+.hm-black-light .full-bg-img {\r
+ background-color: rgba(0, 0, 0, 0.3);\r
+}\r
+\r
+.hm-stylish-light .mask,\r
+.hm-stylish-light .full-bg-img {\r
+ background-color: rgba(62, 69, 81, 0.3);\r
+}\r
+\r
+.hm-white-light .mask,\r
+.hm-white-light .full-bg-img {\r
+ background-color: rgba(255, 255, 255, 0.3);\r
+}\r
+\r
+// Strong overlays\r
+.hm-blue-strong .mask,\r
+.hm-blue-strong .full-bg-img {\r
+ background-color: rgba(3, 169, 244, 0.7);\r
+}\r
+\r
+.hm-red-strong .mask,\r
+.hm-red-strong .full-bg-img {\r
+ background-color: rgba(244, 67, 54, 0.7);\r
+}\r
+\r
+.hm-pink-strong .mask,\r
+.hm-pink-strong .full-bg-img {\r
+ background-color: rgba(233, 30, 99, 0.7);\r
+}\r
+\r
+.hm-purple-strong .mask,\r
+.hm-purple-strong .full-bg-img {\r
+ background-color: rgba(156, 39, 176, 0.7);\r
+}\r
+\r
+.hm-indigo-strong .mask,\r
+.hm-indigo-strong .full-bg-img {\r
+ background-color: rgba(63, 81, 181, 0.7);\r
+}\r
+\r
+.hm-cyan-strong .mask,\r
+.hm-cyan-strong .full-bg-img {\r
+ background-color: rgba(0, 188, 212, 0.7);\r
+}\r
+\r
+.hm-teal-strong .mask,\r
+.hm-teal-strong .full-bg-img {\r
+ background-color: rgba(0, 150, 136, 0.7);\r
+}\r
+\r
+.hm-green-strong .mask,\r
+.hm-green-strong .full-bg-img {\r
+ background-color: rgba(76, 175, 80, 0.7);\r
+}\r
+\r
+.hm-lime-strong .mask,\r
+.hm-lime-strong .full-bg-img {\r
+ background-color: rgba(205, 220, 57, 0.7);\r
+}\r
+\r
+.hm-yellow-strong .mask,\r
+.hm-yellow-strong .full-bg-img {\r
+ background-color: rgba(255, 235, 59, 0.7);\r
+}\r
+\r
+.hm-orange-strong .mask,\r
+.hm-orange-strong .full-bg-img {\r
+ background-color: rgba(255, 152, 0, 0.7);\r
+}\r
+\r
+.hm-brown-strong .mask,\r
+.hm-brown-strong .full-bg-img {\r
+ background-color: rgba(121, 85, 72, 0.7);\r
+}\r
+\r
+.hm-grey-strong .mask,\r
+.hm-grey-strong .full-bg-img {\r
+ background-color: rgba(158, 158, 158, 0.7);\r
+}\r
+\r
+.hm-bluegrey-strong .mask,\r
+.hm-bluegrey-strong .full-bg-img {\r
+ background-color: rgba(96, 125, 139, 0.7);\r
+}\r
+\r
+.hm-black-strong .mask,\r
+.hm-black-strong .full-bg-img {\r
+ background-color: rgba(0, 0, 0, 0.7);\r
+}\r
+\r
+.hm-stylish-strong .mask,\r
+.hm-stylish-strong .full-bg-img {\r
+ background-color: rgba(62, 69, 81, 0.7);\r
+}\r
+\r
+.hm-white-strong .mask,\r
+.hm-white-strong .full-bg-img {\r
+ background-color: rgba(255, 255, 255, 0.7);\r
+}\r
+\r
+// Light overlays\r
+.hm-blue-slight .mask,\r
+.hm-blue-slight .full-bg-img {\r
+ background-color: rgba(3, 169, 244, 0.1);\r
+}\r
+\r
+.hm-red-slight .mask,\r
+.hm-red-slight .full-bg-img {\r
+ background-color: rgba(244, 67, 54, 0.1);\r
+}\r
+\r
+.hm-pink-slight .mask,\r
+.hm-pink-slight .full-bg-img {\r
+ background-color: rgba(233, 30, 99, 0.1);\r
+}\r
+\r
+.hm-purple-slight .mask,\r
+.hm-purple-slight .full-bg-img {\r
+ background-color: rgba(156, 39, 176, 0.1);\r
+}\r
+\r
+.hm-indigo-slight .mask,\r
+.hm-indigo-slight .full-bg-img {\r
+ background-color: rgba(63, 81, 181, 0.1);\r
+}\r
+\r
+.hm-cyan-slight .mask,\r
+.hm-cyan-slight .full-bg-img {\r
+ background-color: rgba(0, 188, 212, 0.1);\r
+}\r
+\r
+.hm-teal-slight .mask,\r
+.hm-teal-slight .full-bg-img {\r
+ background-color: rgba(0, 150, 136, 0.1);\r
+}\r
+\r
+.hm-green-slight .mask,\r
+.hm-green-slight .full-bg-img {\r
+ background-color: rgba(76, 175, 80, 0.1);\r
+}\r
+\r
+.hm-lime-slight .mask,\r
+.hm-lime-slight .full-bg-img {\r
+ background-color: rgba(205, 220, 57, 0.1);\r
+}\r
+\r
+.hm-yellow-slight .mask,\r
+.hm-yellow-slight .full-bg-img {\r
+ background-color: rgba(255, 235, 59, 0.1);\r
+}\r
+\r
+.hm-orange-slight .mask,\r
+.hm-orange-slight .full-bg-img {\r
+ background-color: rgba(255, 152, 0, 0.1);\r
+}\r
+\r
+.hm-brown-slight .mask,\r
+.hm-brown-slight .full-bg-img {\r
+ background-color: rgba(121, 85, 72, 0.1);\r
+}\r
+\r
+.hm-grey-slight .mask,\r
+.hm-grey-slight .full-bg-img {\r
+ background-color: rgba(158, 158, 158, 0.1);\r
+}\r
+\r
+.hm-bluegrey-slight .mask,\r
+.hm-bluegrey-slight .full-bg-img {\r
+ background-color: rgba(96, 125, 139, 0.1);\r
+}\r
+\r
+.hm-black-slight .mask,\r
+.hm-black-slight .full-bg-img {\r
+ background-color: rgba(0, 0, 0, 0.1);\r
+}\r
+\r
+.hm-stylish-slight .mask,\r
+.hm-stylish-slight .full-bg-img {\r
+ background-color: rgba(62, 69, 81, 0.1);\r
+}\r
+\r
+.hm-white-slight .mask,\r
+.hm-white-slight .full-bg-img {\r
+ background-color: rgba(255, 255, 255, 0.1);\r
+}\r
+\r
+// Zoom\r
+.hm-zoom img {\r
+ transition: all 0.2s linear;\r
+}\r
+\r
+.hm-zoom:hover img {\r
+ transform: scale(1.1);\r
+}\r
+\r
+.hm-zoom:hover .mask {\r
+ opacity: 1;\r
+}\r
+\r
+.img-overlay {\r
+ position:relative;\r
+ &:after {\r
+ content: '';\r
+ display:block;\r
+ position:absolute;\r
+ height:100%;\r
+ width:100%;\r
+ top:0;\r
+ left:0;\r
+ bottom:0;\r
+ right:0;\r
+ background:rgba(0,0,0,.17);\r
+ transition: background 0.4s;\r
+ }\r
+ &:hover {\r
+ &:after {\r
+ background:rgba(0,0,0,.35);\r
+ }\r
+ }\r
+ &.light {\r
+ &:after {\r
+ background:rgba(255,255,255,.17);\r
+ }\r
+ &:hover {\r
+ &:after {\r
+ background:rgba(255,255,255,.35);\r
+ }\r
+ }\r
+ }\r
+ &.blue {\r
+ &:after {\r
+ background:rgba(0,145,234,.17);\r
+ }\r
+ &:hover {\r
+ &:after {\r
+ background:rgba(0,145,234,.35);\r
+ }\r
+ }\r
+ }\r
+ &.green {\r
+ &:after {\r
+ background:rgba(76,175,80,.17);\r
+ }\r
+ &:hover {\r
+ &:after {\r
+ background:rgba(76,175,80,.35);\r
+ }\r
+ }\r
+ }\r
+ &.red {\r
+ &:after {\r
+ background:rgba(213,0,0,.17);\r
+ }\r
+ &:hover {\r
+ &:after {\r
+ background:rgba(213,0,0,.35);\r
+ }\r
+ }\r
+ }\r
+}
\ No newline at end of file
projects / bootswatch / blobdiff