Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- background-color: #41140E;
- font-family: sans-serif;
- }
- main {
- max-width: 600px;
- margin: auto;
- }
- h2,
- h3 {
- color: #fff;
- font-weight: normal;
- }
- a {
- text-decoration: none;
- }
- .flexbox {
- display: flex;
- flex-wrap: nowrap;
- }
- .flexboxItem {
- flex-grow: 1;
- }
- /*First Example: Moving Cards */
- /* Styles for moving Cards */
- #movingCards .flexboxItem {
- /*size + position*/
- width: 26%;
- margin: 1.5%;
- padding: 1%;
- border: 2px solid #BF4D0E;
- /*colors + design*/
- background-color: #fff;
- color: #666;
- font-size: 0.8em;
- transition: all .5s;
- }
- #movingCards .flexboxItem a h3,
- #movingCards .flexboxItem a {
- color: #666;
- }
- /*change color + size and rotate element on MouseOver */
- #movingCards .flexboxItem:hover {
- background-color: #41140E;
- width: 28%;
- margin: 0.5%;
- transform: rotate(5deg);
- }
- #movingCards .flexboxItem:hover a h3,
- #movingCards .flexboxItem:hover a {
- color: #fff;
- }
- /* Second Example: Rotating Images */
- #rotatingImages .flexboxItem {
- width: 25%;
- }
- img {
- /*size */
- width: 80%;
- /*border-radius 50% used to set ab a round or oval image*/
- border-radius: 50%;
- /*colors + design*/
- opacity: 0.85;
- box-shadow: 0 0 5px #666;
- transition: all 3s;
- }
- /*change size, box-shadow + opacity and rotate on MouseOver*/
- a:hover img {
- width: 100%;
- opacity: 1;
- box-shadow: 0 0 20px #000;
- transform: rotate(359deg);
- }
- figure {
- position: relative;
- text-align: center;
- margin: 0 auto;
- width: 80%;
- }
- figcaption {
- /*figcaption is used to display the link text */
- /*size + position */
- position: absolute;
- top: 33%;
- display: block;
- width: 100%;
- text-align: center;
- /*colors + design */
- color: #ccc;
- font-size: 16px;
- background-color: rgba(0, 0, 0, 0.2);
- text-shadow: 0 0 5px #000;
- transition: all 1.2s;
- }
- /*change font-size, background-color + color of link-text on MouseOver*/
- a:hover figcaption {
- font-size: 23px;
- background-color: rgba(0, 0, 0, 0.6);
- color: #fff;
Add Comment
Please, Sign In to add comment