Line 2,220: | Line 2,220: | ||
<!---Mask effects---> | <!---Mask effects---> | ||
+ | .colcontainer { | ||
+ | position: relative; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .colimage { | ||
+ | opacity: 1; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .colmiddle { | ||
+ | transition: .5s ease; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .colcontainer:hover .image { | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | |||
+ | .colcontainer:hover .middle { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .coltext { | ||
+ | background-color: #4CAF50; | ||
+ | color: white; | ||
+ | font-size: 16px; | ||
+ | padding: 16px 32px; | ||
+ | } | ||
+ | |||
.view { | .view { | ||
width: 300px; | width: 300px; | ||
Line 2,292: | Line 2,332: | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</style> | </style> | ||
Revision as of 05:57, 17 October 2018