/** CUSTOMISER **/ .theme-cover { position: relative; text-align: center; } .theme-cover .overlay { width: 100%; height: 100%; position: absolute; top: 0; background-color: rgba(75,75,75,0.75); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .theme-cover.active .overlay, .theme-cover:hover .overlay { background-color: rgba(0, 123, 255, 0.5); } .theme-cover img { display: block; position: relative; } .theme-cover h2 { text-transform: uppercase; color: #fff; text-align: center; position: absolute; width: 100%; top: 50%; font-size: 17px; padding: 10px; background: rgba(51, 51, 51, 0.75); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .theme-cover.active h2, .theme-cover:hover h2 { top: 15px; -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } .theme-cover span.info { position: absolute; display: block; width: 75%; top: calc(50% + 15px); left: 50%; text-transform: uppercase; color: #fff; border: 1px solid #fff; background-color: transparent; margin-top: 15px; padding: 10%; opacity: 0; transform-origin: left top; filter: alpha(opacity=0); -webkit-transform: scale(0) translateX(-50%) translateY(-50%); -ms-transform: scale(0) translateX(-50%) translateY(-50%); transform: scale(0) translateX(-50%) translateY(-50%); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .theme-cover.active span.info, .theme-cover:hover span.info { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1) translateX(-50%) translateY(-50%); -ms-transform: scale(1) translateX(-50%) translateY(-50%); transform: scale(1) translateX(-50%) translateY(-50%); } .theme-cover span.info:hover { box-shadow: 0 0 5px #fff; } .customiser .card-footer > div { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }