Book of Lore Badges
WQAdventures Wiki » Book of Lore Badges
Add a new badge to this list! |
Achievement
.row { display: flex; flex-wrap: wrap; -webkit-flex: wrap; } .row::after { content: ""; clear: both; display: table; } .hvr-grow img { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover img, .hvr-grow:focus img, .hvr-grow:active img { -webkit-transform: scale(1.15); transform: scale(1.15); } .column { float: left; flex: auto; padding: 5px; } .column img { width: 100px; height: 100px; float: left; object-fit: contain; background-color: #E2DECC; border-radius: 15px; } .hover span { display: none; } .hover:hover span { position: absolute; display: inline; color: #eeeeee; width: 200px; font-size: 12px; margin: 115px -160px; background: #1a1a1a; padding: 10px; border-radius: 4px; border: 2px solid #1a1a1a; z-index: 1; } .hover:hover span:first-of-type::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent #1a1a1a transparent; } .hover:hover span span{ position: relative; margin: auto; height: auto; width: auto; border: none; padding: 0; }
HeroMart
.row { display: flex; flex-wrap: wrap; -webkit-flex: wrap; } .row::after { content: ""; clear: both; display: table; } .hvr-grow img { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover img, .hvr-grow:focus img, .hvr-grow:active img { -webkit-transform: scale(1.15); transform: scale(1.15); } .column { float: left; flex: auto; padding: 5px; } .column img { width: 100px; height: 100px; float: left; object-fit: contain; background-color: #E2DECC; border-radius: 15px; } .hover span { display: none; } .hover:hover span { position: absolute; display: inline; color: #eeeeee; width: 200px; font-size: 12px; margin: 115px -160px; background: #1a1a1a; padding: 10px; border-radius: 4px; border: 2px solid #1a1a1a; z-index: 1; } .hover:hover span:first-of-type::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent #1a1a1a transparent; } .hover:hover span span{ position: relative; margin: auto; height: auto; width: auto; border: none; padding: 0; }
Other
.row { display: flex; flex-wrap: wrap; -webkit-flex: wrap; } .row::after { content: ""; clear: both; display: table; } .hvr-grow img { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover img, .hvr-grow:focus img, .hvr-grow:active img { -webkit-transform: scale(1.15); transform: scale(1.15); } .column { float: left; flex: auto; padding: 5px; } .column img { width: 100px; height: 100px; float: left; object-fit: contain; background-color: #E2DECC; border-radius: 15px; } .hover span { display: none; } .hover:hover span { position: absolute; display: inline; color: #eeeeee; width: 200px; font-size: 12px; margin: 115px -160px; background: #1a1a1a; padding: 10px; border-radius: 4px; border: 2px solid #1a1a1a; z-index: 1; } .hover:hover span:first-of-type::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent #1a1a1a transparent; } .hover:hover span span{ position: relative; margin: auto; height: auto; width: auto; border: none; padding: 0; }