.tribe-dbc__g-col-wrapper { height: 400px; background-color: rgba(125, 125, 125, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .tribe-dbc__event-date { color: #fff; font-weight: bold; font-size: 2em; line-height: 2em; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif; box-sizing: border-box; transition: opacity 0.3s ease; } .tribe-dbc__hover-title, .tribe-dbc__event-title { color: #fff; font-size: 1.5em !important; line-height: 1.5em !important; font-weight: bold; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif; box-sizing: border-box; width: 90%; display: flex; justify-content: center; align-items: center; text-align: center; transition: opacity 0.3s ease; } .tribe-dbc__hover-content { position: absolute; bottom: -100%; left: 0; right: 0; background-color: rgb(226, 35, 23); color: #fff; display: flex; justify-content: center; flex-direction: column; align-items: center; height: 100%; transition: bottom 0.3s ease; z-index: 10; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif; box-sizing: border-box; text-align: center; } .tribe-dbc__g-col-wrapper:hover .tribe-dbc__event-date, .tribe-dbc__g-col-wrapper:hover .tribe-dbc__event-title { opacity: 0; } .tribe-dbc__g-col-wrapper:hover .tribe-dbc__hover-content { bottom: 0; } .tribe-dbc__hover-content-wrapper { width: 90%; } .tribe-dbc__hover-button:focus, .tribe-dbc__hover-button:active { outline: none !important; } .tribe-dbc__hover-button { outline: 0; color: #ffffff !important; text-decoration: none !important; border: 1px solid #fff !important; border-top: 5px solid #fff !important; padding: 8px 15px !important; font-weight: bold !important; font-size: 1.1em !important; display: inline-block !important; margin-top: 20px !important; } .tribe-dbc__hover-datetime, .tribe-dbc__hover-excerpt { color: #ffffff; box-sizing: border-box; width: 90%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 0.975em !important; }