/* Styling vote container */ .vote-container { position: fixed; transform: translateX(calc(-100% - 20px)); font-size: 24px; background-color: #fafafa; border-radius: 10px; padding: 4px 12px; } .vote-container > * { display: block; text-align: center; margin: 5px 0; color: #666; } .vote-container .fa.fa-thumbs-up { color: #2272ff; } .vote-container .fa.fa-thumbs-down { color: #F72754; } /* Styling project content */ .project-content-container img { max-width: 100%; } /* Styling prev and next project card */ .project-card { height: 100px; position: relative; } .project-card::after { position: absolute; width: calc(100% - 90px); height: 100%; top: 0; left: 90px; content: ""; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); transform-origin: left; -webkit-transition: transform .2s ease-out; -moz-transition: transform .2s ease-out; -ms-transition: transform .2s ease-out; -o-transition: transform .2s ease-out; transition: transform .2s ease-out; background: rgba(0,0,0,.08); z-index: -1; border-radius: 10px; } .project-card:hover::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .project-card a { display: block; width: 100%; height: 100%; } .project-image { width: 100px; height: 100px; background: #2272ff center; background-size: cover; } .project-card.next-project-card::after { left: calc(100% - 90px); } .project-card.next-project-card:hover::after { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .prev-project, .next-project { max-width: calc(100% - 110px); } .prev-project { float: left; padding-left: 10px; } .next-project { text-align: right; float: right; padding-right: 10px; }