├── LICENSE ├── README.md ├── css ├── main.css └── start-here.css ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json └── scss └── main.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Kevin Powell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fun with transforms and transform-origin 2 | Files that go along with my YT video taking a look at transform and transform-origin 3 | 4 | ## Follow along 5 | If you want to follow along with my tutorial or try things out on your own before watching, you can switch the linked CSS file to `start-here.css` and you'll be good to go. 6 | 7 | ## Using gulp 8 | Included is a gulpfile which includes browserSync and a Sass compiler. If you'd like to use it, you must first have node and npm installed. Go to [nodejs](https://nodejs.org/en/) and install it, then follow these steps: 9 | 10 | 1) In your terminal, navigate to the project folder on your computer 11 | 2) type `npm install` 12 | 3) Once that is finished, type `gulp watch` 13 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | .fancy-link { 8 | text-decoration: none; 9 | color: #ee6352; 10 | position: relative; 11 | } 12 | 13 | .fancy-link::after { 14 | content: ""; 15 | position: absolute; 16 | left: 0; 17 | bottom: 0; 18 | width: 100%; 19 | height: 2px; 20 | background: currentColor; 21 | -webkit-transform: scaleX(0); 22 | transform: scaleX(0); 23 | -webkit-transform-origin: right; 24 | transform-origin: right; 25 | transition: -webkit-transform 250ms ease-in; 26 | transition: transform 250ms ease-in; 27 | transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; 28 | } 29 | 30 | .fancy-link:hover::after { 31 | -webkit-transform: scaleX(1); 32 | transform: scaleX(1); 33 | -webkit-transform-origin: left; 34 | transform-origin: left; 35 | } 36 | 37 | .button { 38 | cursor: pointer; 39 | border: 0; 40 | background: #ee6352; 41 | color: white; 42 | padding: 1em 1.5em; 43 | position: relative; 44 | z-index: 1; 45 | } 46 | 47 | .button + .button { 48 | margin-left: 1em; 49 | } 50 | 51 | .button::after { 52 | content: ""; 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | background: rgba(0, 0, 0, 0.5); 59 | z-index: -1; 60 | transition: -webkit-transform 200ms ease-in; 61 | transition: transform 200ms ease-in; 62 | transition: transform 200ms ease-in, -webkit-transform 200ms ease-in; 63 | } 64 | 65 | .button-one::after { 66 | -webkit-transform: scaleX(0); 67 | transform: scaleX(0); 68 | -webkit-transform-origin: right; 69 | transform-origin: right; 70 | } 71 | 72 | .button-one:hover::after { 73 | -webkit-transform: scaleX(1); 74 | transform: scaleX(1); 75 | -webkit-transform-origin: left; 76 | transform-origin: left; 77 | } 78 | 79 | .button-two::after { 80 | -webkit-transform: scaleY(0); 81 | transform: scaleY(0); 82 | -webkit-transform-origin: bottom; 83 | transform-origin: bottom; 84 | } 85 | 86 | .button-two:hover::after { 87 | -webkit-transform: scaleY(1); 88 | transform: scaleY(1); 89 | -webkit-transform-origin: top; 90 | transform-origin: top; 91 | } 92 | 93 | .button-three::after { 94 | -webkit-transform: scale(0); 95 | transform: scale(0); 96 | -webkit-transform-origin: bottom right; 97 | transform-origin: bottom right; 98 | } 99 | 100 | .button-three:hover::after { 101 | -webkit-transform: scale(1); 102 | transform: scale(1); 103 | -webkit-transform-origin: top left; 104 | transform-origin: top left; 105 | } 106 | 107 | .card { 108 | padding: 2rem; 109 | background-image: url(https://unsplash.it/600); 110 | /* placeholder image */ 111 | backgrond-size: cover; 112 | background-color: #444; 113 | background-blend-mode: multiply; 114 | color: white; 115 | text-align: left; 116 | } 117 | 118 | .card__title { 119 | position: relative; 120 | z-index: 1; 121 | display: inline-block; 122 | margin-bottom: 1rem; 123 | } 124 | 125 | .card__title::after { 126 | content: ""; 127 | position: absolute; 128 | top: -0.25rem; 129 | left: -2rem; 130 | bottom: -0.25rem; 131 | width: calc(100% + 4rem); 132 | background: #ee6352; 133 | z-index: -1; 134 | -webkit-transform: scaleX(0.075); 135 | transform: scaleX(0.075); 136 | -webkit-transform-origin: left; 137 | transform-origin: left; 138 | transition: -webkit-transform 250ms ease-in; 139 | transition: transform 250ms ease-in; 140 | transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; 141 | } 142 | 143 | .card:hover .card__title::after { 144 | -webkit-transform: scaleX(1); 145 | transform: scaleX(1); 146 | } 147 | 148 | .card__body { 149 | position: relative; 150 | z-index: 1; 151 | color: transparent; 152 | margin: 0; 153 | transition: color 150ms 350ms; 154 | } 155 | 156 | .card__body::after { 157 | content: ""; 158 | position: absolute; 159 | top: -0.75rem; 160 | bottom: -0.75rem; 161 | left: -0.75em; 162 | right: -0.75em; 163 | background: white; 164 | z-index: -1; 165 | -webkit-transform: scaleY(0); 166 | transform: scaleY(0); 167 | transition: -webkit-transform 250ms ease-in 250ms; 168 | transition: transform 250ms ease-in 250ms; 169 | transition: transform 250ms ease-in 250ms, -webkit-transform 250ms ease-in 250ms; 170 | -webkit-transform-origin: top; 171 | transform-origin: top; 172 | } 173 | 174 | .card:hover .card__body { 175 | color: #333; 176 | } 177 | 178 | .card:hover .card__body::after { 179 | -webkit-transform: scaleY(1); 180 | transform: scaleY(1); 181 | } 182 | 183 | body { 184 | font-family: basic-sans, sans-serif; 185 | min-height: 100vh; 186 | display: flex; 187 | flex-direction: column; 188 | justify-content: center; 189 | align-items: center; 190 | font-size: 1.125em; 191 | line-height: 1.6; 192 | color: #333; 193 | background: #ddd; 194 | } 195 | 196 | .content { 197 | background: white; 198 | width: 70vw; 199 | padding: 3em; 200 | box-shadow: 0 0 3em rgba(0, 0, 0, 0.15); 201 | text-align: center; 202 | margin-bottom: 1em; 203 | } 204 | 205 | .title { 206 | margin: 0 0 0.5em; 207 | text-transform: uppercase; 208 | font-weight: 900; 209 | font-style: italic; 210 | font-size: 3rem; 211 | color: #ee6352; 212 | line-height: 0.8; 213 | } 214 | 215 | /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJzb3VyY2VzIjpbIm1haW4uc2NzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIqLFxyXG4qOjpiZWZvcmUsXHJcbio6OmFmdGVyIHtcclxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG59XHJcblxyXG4uZmFuY3ktbGluayB7XHJcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xyXG4gIGNvbG9yOiAjZWU2MzUyO1xyXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxufVxyXG5cclxuLmZhbmN5LWxpbms6OmFmdGVyIHtcclxuICBjb250ZW50OiBcIlwiO1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICBsZWZ0OiAwO1xyXG4gIGJvdHRvbTogMDtcclxuICB3aWR0aDogMTAwJTtcclxuICBoZWlnaHQ6IDJweDtcclxuICBiYWNrZ3JvdW5kOiBjdXJyZW50Q29sb3I7XHJcblxyXG4gIHRyYW5zZm9ybTogc2NhbGVYKDApO1xyXG4gIHRyYW5zZm9ybS1vcmlnaW46IHJpZ2h0O1xyXG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAyNTBtcyBlYXNlLWluO1xyXG59XHJcblxyXG4uZmFuY3ktbGluazpob3Zlcjo6YWZ0ZXIge1xyXG4gIHRyYW5zZm9ybTogc2NhbGVYKDEpO1xyXG4gIHRyYW5zZm9ybS1vcmlnaW46IGxlZnQ7XHJcbn1cclxuXHJcbi5idXR0b24ge1xyXG4gIGN1cnNvcjogcG9pbnRlcjtcclxuICBib3JkZXI6IDA7XHJcbiAgYmFja2dyb3VuZDogI2VlNjM1MjtcclxuICBjb2xvcjogd2hpdGU7XHJcbiAgcGFkZGluZzogMWVtIDEuNWVtO1xyXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICB6LWluZGV4OiAxO1xyXG59XHJcblxyXG4uYnV0dG9uICsgLmJ1dHRvbiB7XHJcbiAgbWFyZ2luLWxlZnQ6IDFlbTtcclxufVxyXG5cclxuLmJ1dHRvbjo6YWZ0ZXIge1xyXG4gIGNvbnRlbnQ6IFwiXCI7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIHRvcDogMDtcclxuICBsZWZ0OiAwO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGhlaWdodDogMTAwJTtcclxuICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNSk7XHJcbiAgei1pbmRleDogLTE7XHJcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDIwMG1zIGVhc2UtaW47XHJcbn1cclxuXHJcbi5idXR0b24tb25lOjphZnRlciB7XHJcbiAgdHJhbnNmb3JtOiBzY2FsZVgoMCk7XHJcbiAgdHJhbnNmb3JtLW9yaWdpbjogcmlnaHQ7XHJcbn1cclxuXHJcbi5idXR0b24tb25lOmhvdmVyOjphZnRlciB7XHJcbiAgdHJhbnNmb3JtOiBzY2FsZVgoMSk7XHJcbiAgdHJhbnNmb3JtLW9yaWdpbjogbGVmdDtcclxufVxyXG5cclxuLmJ1dHRvbi10d286OmFmdGVyIHtcclxuICB0cmFuc2Zvcm06IHNjYWxlWSgwKTtcclxuICB0cmFuc2Zvcm0tb3JpZ2luOiBib3R0b207XHJcbn1cclxuXHJcbi5idXR0b24tdHdvOmhvdmVyOjphZnRlciB7XHJcbiAgdHJhbnNmb3JtOiBzY2FsZVkoMSk7XHJcbiAgdHJhbnNmb3JtLW9yaWdpbjogdG9wO1xyXG59XHJcblxyXG4uYnV0dG9uLXRocmVlOjphZnRlciB7XHJcbiAgdHJhbnNmb3JtOiBzY2FsZSgwKTtcclxuICB0cmFuc2Zvcm0tb3JpZ2luOiBib3R0b20gcmlnaHQ7XHJcbn1cclxuXHJcbi5idXR0b24tdGhyZWU6aG92ZXI6OmFmdGVyIHtcclxuICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xyXG4gIHRyYW5zZm9ybS1vcmlnaW46IHRvcCBsZWZ0O1xyXG59XHJcblxyXG4uY2FyZCB7XHJcbiAgcGFkZGluZzogMnJlbTtcclxuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoaHR0cHM6Ly91bnNwbGFzaC5pdC82MDApOyAvKiBwbGFjZWhvbGRlciBpbWFnZSAqL1xyXG4gIGJhY2tncm9uZC1zaXplOiBjb3ZlcjtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNDQ0O1xyXG4gIGJhY2tncm91bmQtYmxlbmQtbW9kZTogbXVsdGlwbHk7XHJcbiAgY29sb3I6IHdoaXRlO1xyXG4gIHRleHQtYWxpZ246IGxlZnQ7XHJcbn1cclxuXHJcbi5jYXJkX190aXRsZSB7XHJcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gIHotaW5kZXg6IDE7XHJcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xyXG4gIG1hcmdpbi1ib3R0b206IDFyZW07XHJcbn1cclxuXHJcbi5jYXJkX190aXRsZTo6YWZ0ZXIge1xyXG4gIGNvbnRlbnQ6IFwiXCI7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIHRvcDogLTAuMjVyZW07XHJcbiAgbGVmdDogLTJyZW07XHJcbiAgYm90dG9tOiAtMC4yNXJlbTtcclxuICB3aWR0aDogY2FsYygxMDAlICsgNHJlbSk7XHJcbiAgYmFja2dyb3VuZDogI2VlNjM1MjtcclxuICB6LWluZGV4OiAtMTtcclxuXHJcbiAgdHJhbnNmb3JtOiBzY2FsZVgoMC4wNzUpO1xyXG4gIHRyYW5zZm9ybS1vcmlnaW46IGxlZnQ7XHJcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDI1MG1zIGVhc2UtaW47XHJcbn1cclxuXHJcbi5jYXJkOmhvdmVyIC5jYXJkX190aXRsZTo6YWZ0ZXIge1xyXG4gIHRyYW5zZm9ybTogc2NhbGVYKDEpO1xyXG59XHJcblxyXG4uY2FyZF9fYm9keSB7XHJcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gIHotaW5kZXg6IDE7XHJcbiAgY29sb3I6IHRyYW5zcGFyZW50O1xyXG4gIG1hcmdpbjogMDtcclxuICB0cmFuc2l0aW9uOiBjb2xvciAxNTBtcyAzNTBtcztcclxufVxyXG5cclxuLmNhcmRfX2JvZHk6OmFmdGVyIHtcclxuICBjb250ZW50OiBcIlwiO1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICB0b3A6IC0wLjc1cmVtO1xyXG4gIGJvdHRvbTogLTAuNzVyZW07XHJcbiAgbGVmdDogLTAuNzVlbTtcclxuICByaWdodDogLTAuNzVlbTtcclxuICBiYWNrZ3JvdW5kOiB3aGl0ZTtcclxuICB6LWluZGV4OiAtMTtcclxuICB0cmFuc2Zvcm06IHNjYWxlWSgwKTtcclxuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMjUwbXMgZWFzZS1pbiAyNTBtcztcclxuICB0cmFuc2Zvcm0tb3JpZ2luOiB0b3A7XHJcbn1cclxuXHJcbi5jYXJkOmhvdmVyIC5jYXJkX19ib2R5IHtcclxuICBjb2xvcjogIzMzMztcclxufVxyXG5cclxuLmNhcmQ6aG92ZXIgLmNhcmRfX2JvZHk6OmFmdGVyIHtcclxuICB0cmFuc2Zvcm06IHNjYWxlWSgxKTtcclxufVxyXG5cclxuYm9keSB7XHJcbiAgZm9udC1mYW1pbHk6IGJhc2ljLXNhbnMsIHNhbnMtc2VyaWY7XHJcbiAgbWluLWhlaWdodDogMTAwdmg7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgZm9udC1zaXplOiAxLjEyNWVtO1xyXG4gIGxpbmUtaGVpZ2h0OiAxLjY7XHJcbiAgY29sb3I6ICMzMzM7XHJcbiAgYmFja2dyb3VuZDogI2RkZDtcclxufVxyXG5cclxuLmNvbnRlbnQge1xyXG4gIGJhY2tncm91bmQ6IHdoaXRlO1xyXG4gIHdpZHRoOiA3MHZ3O1xyXG4gIHBhZGRpbmc6IDNlbTtcclxuICBib3gtc2hhZG93OiAwIDAgM2VtIHJnYmEoMCwgMCwgMCwgMC4xNSk7XHJcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gIG1hcmdpbi1ib3R0b206IDFlbTtcclxufVxyXG5cclxuLnRpdGxlIHtcclxuICBtYXJnaW46IDAgMCAwLjVlbTtcclxuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xyXG4gIGZvbnQtd2VpZ2h0OiA5MDA7XHJcbiAgZm9udC1zdHlsZTogaXRhbGljO1xyXG4gIGZvbnQtc2l6ZTogM3JlbTtcclxuICBjb2xvcjogI2VlNjM1MjtcclxuICBsaW5lLWhlaWdodDogMC44O1xyXG59XHJcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxBQUFBLENBQUM7QUFDRCxDQUFDLEFBQUEsUUFBUTtBQUNULENBQUMsQUFBQSxPQUFPLENBQUM7RUFDUCxVQUFVLEVBQUUsVUFBVTtDQUN2Qjs7QUFFRCxBQUFBLFdBQVcsQ0FBQztFQUNWLGVBQWUsRUFBRSxJQUFJO0VBQ3JCLEtBQUssRUFBRSxPQUFPO0VBQ2QsUUFBUSxFQUFFLFFBQVE7Q0FDbkI7O0FBRUQsQUFBQSxXQUFXLEFBQUEsT0FBTyxDQUFDO0VBQ2pCLE9BQU8sRUFBRSxFQUFFO0VBQ1gsUUFBUSxFQUFFLFFBQVE7RUFDbEIsSUFBSSxFQUFFLENBQUM7RUFDUCxNQUFNLEVBQUUsQ0FBQztFQUNULEtBQUssRUFBRSxJQUFJO0VBQ1gsTUFBTSxFQUFFLEdBQUc7RUFDWCxVQUFVLEVBQUUsWUFBWTtFQUV4QixTQUFTLEVBQUUsU0FBUztFQUNwQixnQkFBZ0IsRUFBRSxLQUFLO0VBQ3ZCLFVBQVUsRUFBRSx1QkFBdUI7Q0FDcEM7O0FBRUQsQUFBQSxXQUFXLEFBQUEsTUFBTSxBQUFBLE9BQU8sQ0FBQztFQUN2QixTQUFTLEVBQUUsU0FBUztFQUNwQixnQkFBZ0IsRUFBRSxJQUFJO0NBQ3ZCOztBQUVELEFBQUEsT0FBTyxDQUFDO0VBQ04sTUFBTSxFQUFFLE9BQU87RUFDZixNQUFNLEVBQUUsQ0FBQztFQUNULFVBQVUsRUFBRSxPQUFPO0VBQ25CLEtBQUssRUFBRSxLQUFLO0VBQ1osT0FBTyxFQUFFLFNBQVM7RUFDbEIsUUFBUSxFQUFFLFFBQVE7RUFDbEIsT0FBTyxFQUFFLENBQUM7Q0FDWDs7QUFFRCxBQUFBLE9BQU8sR0FBRyxPQUFPLENBQUM7RUFDaEIsV0FBVyxFQUFFLEdBQUc7Q0FDakI7O0FBRUQsQUFBQSxPQUFPLEFBQUEsT0FBTyxDQUFDO0VBQ2IsT0FBTyxFQUFFLEVBQUU7RUFDWCxRQUFRLEVBQUUsUUFBUTtFQUNsQixHQUFHLEVBQUUsQ0FB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 */ 216 | -------------------------------------------------------------------------------- /css/start-here.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | .fancy-link { 8 | text-decoration: none; 9 | color: #ee6352; 10 | } 11 | 12 | .button { 13 | cursor: pointer; 14 | border: 0; 15 | background: #ee6352; 16 | color: white; 17 | padding: 1em 1.5em; 18 | } 19 | 20 | .button + .button { 21 | margin-left: 1em; 22 | } 23 | 24 | .card { 25 | padding: 2rem; 26 | background-image: url(https://unsplash.it/600); 27 | /* placeholder image */ 28 | backgrond-size: cover; 29 | background-color: #444; 30 | background-blend-mode: multiply; 31 | color: white; 32 | text-align: left; 33 | } 34 | 35 | body { 36 | font-family: basic-sans, sans-serif; 37 | min-height: 100vh; 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: center; 41 | align-items: center; 42 | font-size: 1.125em; 43 | line-height: 1.6; 44 | color: #333; 45 | background: #ddd; 46 | } 47 | 48 | .content { 49 | background: white; 50 | width: 70vw; 51 | padding: 3em; 52 | box-shadow: 0 0 3em rgba(0, 0, 0, 0.15); 53 | text-align: center; 54 | margin-bottom: 1em; 55 | } 56 | 57 | .title { 58 | margin: 0 0 0.5em; 59 | text-transform: uppercase; 60 | font-weight: 900; 61 | font-style: italic; 62 | font-size: 3rem; 63 | color: #ee6352; 64 | line-height: 0.8; 65 | } 66 | 67 | /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJzb3VyY2VzIjpbIm1haW4uc2NzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIqLFxyXG4qOjpiZWZvcmUsXHJcbio6OmFmdGVyIHtcclxuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG59XHJcblxyXG4uZmFuY3ktbGluayB7XHJcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xyXG4gIGNvbG9yOiAjZWU2MzUyO1xyXG59XHJcblxyXG4uYnV0dG9uIHtcclxuICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgYm9yZGVyOiAwO1xyXG4gIGJhY2tncm91bmQ6ICNlZTYzNTI7XHJcbiAgY29sb3I6IHdoaXRlO1xyXG4gIHBhZGRpbmc6IDFlbSAxLjVlbTtcclxufVxyXG5cclxuLmJ1dHRvbiArIC5idXR0b24ge1xyXG4gIG1hcmdpbi1sZWZ0OiAxZW07XHJcbn1cclxuXHJcbi5jYXJkIHtcclxuICBwYWRkaW5nOiAycmVtO1xyXG4gIGJhY2tncm91bmQtaW1hZ2U6IHVybChodHRwczovL3Vuc3BsYXNoLml0LzYwMCk7IC8qIHBsYWNlaG9sZGVyIGltYWdlICovXHJcbiAgYmFja2dyb25kLXNpemU6IGNvdmVyO1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICM0NDQ7XHJcbiAgYmFja2dyb3VuZC1ibGVuZC1tb2RlOiBtdWx0aXBseTtcclxuICBjb2xvcjogd2hpdGU7XHJcbiAgdGV4dC1hbGlnbjogbGVmdDtcclxufVxyXG5cclxuLmNhcmRfX3RpdGxlIHtcclxufVxyXG5cclxuYm9keSB7XHJcbiAgZm9udC1mYW1pbHk6IGJhc2ljLXNhbnMsIHNhbnMtc2VyaWY7XHJcbiAgbWluLWhlaWdodDogMTAwdmg7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgZm9udC1zaXplOiAxLjEyNWVtO1xyXG4gIGxpbmUtaGVpZ2h0OiAxLjY7XHJcbiAgY29sb3I6ICMzMzM7XHJcbiAgYmFja2dyb3VuZDogI2RkZDtcclxufVxyXG5cclxuLmNvbnRlbnQge1xyXG4gIGJhY2tncm91bmQ6IHdoaXRlO1xyXG4gIHdpZHRoOiA3MHZ3O1xyXG4gIHBhZGRpbmc6IDNlbTtcclxuICBib3gtc2hhZG93OiAwIDAgM2VtIHJnYmEoMCwgMCwgMCwgMC4xNSk7XHJcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gIG1hcmdpbi1ib3R0b206IDFlbTtcclxufVxyXG5cclxuLnRpdGxlIHtcclxuICBtYXJnaW46IDAgMCAwLjVlbTtcclxuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xyXG4gIGZvbnQtd2VpZ2h0OiA5MDA7XHJcbiAgZm9udC1zdHlsZTogaXRhbGljO1xyXG4gIGZvbnQtc2l6ZTogM3JlbTtcclxuICBjb2xvcjogI2VlNjM1MjtcclxuICBsaW5lLWhlaWdodDogMC44O1xyXG59XHJcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxBQUFBLENBQUM7QUFDRCxDQUFDLEFBQUEsUUFBUTtBQUNULENBQUMsQUFBQSxPQUFPLENBQUM7RUFDUCxVQUFVLEVBQUUsVUFBVTtDQUN2Qjs7QUFFRCxBQUFBLFdBQVcsQ0FBQztFQUNWLGVBQWUsRUFBRSxJQUFJO0VBQ3JCLEtBQUssRUFBRSxPQUFPO0NBQ2Y7O0FBRUQsQUFBQSxPQUFPLENBQUM7RUFDTixNQUFNLEVBQUUsT0FBTztFQUNmLE1BQU0sRUFBRSxDQUFDO0VBQ1QsVUFBVSxFQUFFLE9BQU87RUFDbkIsS0FBSyxFQUFFLEtBQUs7RUFDWixPQUFPLEVBQUUsU0FBUztDQUNuQjs7QUFFRCxBQUFBLE9BQU8sR0FBRyxPQUFPLENBQUM7RUFDaEIsV0FBVyxFQUFFLEdBQUc7Q0FDakI7O0FBRUQsQUFBQSxLQUFLLENBQUM7RUFDSixPQUFPLEVBQUUsSUFBSTtFQUNiLGdCQUFnQixFQUFFLDRCQUE0QjtFQUFFLHVCQUF1QjtFQUN2RSxjQUFjLEVBQUUsS0FBSztFQUNyQixnQkFBZ0IsRUFBRSxJQUFJO0VBQ3RCLHFCQUFxQixFQUFFLFFBQVE7RUFDL0IsS0FBSyxFQUFFLEtBQUs7RUFDWixVQUFVLEVBQUUsSUFBSTtDQUNqQjs7QUFLRCxBQUFBLElBQUksQ0FBQztFQUNILFdBQVcsRUFBRSxzQkFBc0I7RUFDbkMsVUFBVSxFQUFFLEtBQUs7RUFDakIsT0FBTyxFQUFFLElBQUk7RUFDYixjQUFjLEVBQUUsTUFBTTtFQUN0QixlQUFlLEVBQUUsTUFBTTtFQUN2QixXQUFXLEVBQUUsTUFBTTtFQUNuQixTQUFTLEVBQUUsT0FBTztFQUNsQixXQUFXLEVBQUUsR0FBRztFQUNoQixLQUFLLEVBQUUsSUFBSTtFQUNYLFVBQVUsRUFBRSxJQUFJO0NBQ2pCOztBQUVELEFBQUEsUUFBUSxDQUFDO0VBQ1AsVUFBVSxFQUFFLEtBQUs7RUFDakIsS0FBSyxFQUFFLElBQUk7RUFDWCxPQUFPLEVBQUUsR0FBRztFQUNaLFVBQVUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxtQkFBbUI7RUFDdkMsVUFBVSxFQUFFLE1BQU07RUFDbEIsYUFBYSxFQUFFLEdBQUc7Q0FDbkI7O0FBRUQsQUFBQSxNQUFNLENBQUM7RUFDTCxNQUFNLEVBQUUsU0FBUztFQUNqQixjQUFjLEVBQUUsU0FBUztFQUN6QixXQUFXLEVBQUUsR0FBRztFQUNoQixVQUFVLEVBQUUsTUFBTTtFQUNsQixTQUFTLEVBQUUsSUFBSTtFQUNmLEtBQUssRUFBRSxPQUFPO0VBQ2QsV0FBVyxFQUFFLEdBQUc7Q0FDakIifQ== */ 68 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const sass = require("gulp-sass"); 3 | const sourcemaps = require("gulp-sourcemaps"); 4 | const autoprefixer = require("gulp-autoprefixer"); 5 | const browserSync = require("browser-sync").create(); 6 | 7 | const sassOptions = { 8 | outputStyle: "expanded" 9 | }; 10 | 11 | // compile scss into css 12 | 13 | function style() { 14 | return gulp 15 | .src("./scss/**/*.scss") 16 | .pipe(sourcemaps.init()) 17 | .pipe(sass(sassOptions).on("error", sass.logError)) 18 | .pipe(sourcemaps.write()) 19 | .pipe(autoprefixer()) 20 | .pipe(gulp.dest("./css")) 21 | .pipe(browserSync.stream()); 22 | } 23 | 24 | function watch() { 25 | browserSync.init({ 26 | server: "." 27 | }); 28 | gulp.watch("./scss/**/*.scss", style); 29 | gulp.watch("./*.html").on("change", browserSync.reload); 30 | gulp.watch("./js/**/*.js", browserSync.reload); 31 | } 32 | 33 | exports.style = style; 34 | exports.watch = watch; 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |

Really fun hover effects with transform-origin

14 | 15 | It works well with links 16 | and even with short ones too. 17 |
18 | 19 |
20 | 21 | 22 | 23 |
24 | 25 |
26 |
27 |

Lorem ipsum dolor

28 |

Lorem ipsum dolor sit amet.

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass-starter-project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Kevin Powell", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "browser-sync": "^2.26.5", 13 | "gulp": "^4.0.0", 14 | "gulp-autoprefixer": "^6.0.0", 15 | "gulp-sass": "^4.0.2", 16 | "gulp-sourcemaps": "^2.6.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | .fancy-link { 8 | text-decoration: none; 9 | color: #ee6352; 10 | position: relative; 11 | } 12 | 13 | .fancy-link::after { 14 | content: ""; 15 | position: absolute; 16 | left: 0; 17 | bottom: 0; 18 | width: 100%; 19 | height: 2px; 20 | background: currentColor; 21 | 22 | transform: scaleX(0); 23 | transform-origin: right; 24 | transition: transform 250ms ease-in; 25 | } 26 | 27 | .fancy-link:hover::after { 28 | transform: scaleX(1); 29 | transform-origin: left; 30 | } 31 | 32 | .button { 33 | cursor: pointer; 34 | border: 0; 35 | background: #ee6352; 36 | color: white; 37 | padding: 1em 1.5em; 38 | position: relative; 39 | z-index: 1; 40 | } 41 | 42 | .button + .button { 43 | margin-left: 1em; 44 | } 45 | 46 | .button::after { 47 | content: ""; 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | background: rgba(0, 0, 0, 0.5); 54 | z-index: -1; 55 | transition: transform 200ms ease-in; 56 | } 57 | 58 | .button-one::after { 59 | transform: scaleX(0); 60 | transform-origin: right; 61 | } 62 | 63 | .button-one:hover::after { 64 | transform: scaleX(1); 65 | transform-origin: left; 66 | } 67 | 68 | .button-two::after { 69 | transform: scaleY(0); 70 | transform-origin: bottom; 71 | } 72 | 73 | .button-two:hover::after { 74 | transform: scaleY(1); 75 | transform-origin: top; 76 | } 77 | 78 | .button-three::after { 79 | transform: scale(0); 80 | transform-origin: bottom right; 81 | } 82 | 83 | .button-three:hover::after { 84 | transform: scale(1); 85 | transform-origin: top left; 86 | } 87 | 88 | .card { 89 | padding: 2rem; 90 | background-image: url(https://unsplash.it/600); /* placeholder image */ 91 | backgrond-size: cover; 92 | background-color: #444; 93 | background-blend-mode: multiply; 94 | color: white; 95 | text-align: left; 96 | } 97 | 98 | .card__title { 99 | position: relative; 100 | z-index: 1; 101 | display: inline-block; 102 | margin-bottom: 1rem; 103 | } 104 | 105 | .card__title::after { 106 | content: ""; 107 | position: absolute; 108 | top: -0.25rem; 109 | left: -2rem; 110 | bottom: -0.25rem; 111 | width: calc(100% + 4rem); 112 | background: #ee6352; 113 | z-index: -1; 114 | 115 | transform: scaleX(0.075); 116 | transform-origin: left; 117 | transition: transform 250ms ease-in; 118 | } 119 | 120 | .card:hover .card__title::after { 121 | transform: scaleX(1); 122 | } 123 | 124 | .card__body { 125 | position: relative; 126 | z-index: 1; 127 | color: transparent; 128 | margin: 0; 129 | transition: color 150ms 350ms; 130 | } 131 | 132 | .card__body::after { 133 | content: ""; 134 | position: absolute; 135 | top: -0.75rem; 136 | bottom: -0.75rem; 137 | left: -0.75em; 138 | right: -0.75em; 139 | background: white; 140 | z-index: -1; 141 | transform: scaleY(0); 142 | transition: transform 250ms ease-in 250ms; 143 | transform-origin: top; 144 | } 145 | 146 | .card:hover .card__body { 147 | color: #333; 148 | } 149 | 150 | .card:hover .card__body::after { 151 | transform: scaleY(1); 152 | } 153 | 154 | body { 155 | font-family: basic-sans, sans-serif; 156 | min-height: 100vh; 157 | display: flex; 158 | flex-direction: column; 159 | justify-content: center; 160 | align-items: center; 161 | font-size: 1.125em; 162 | line-height: 1.6; 163 | color: #333; 164 | background: #ddd; 165 | } 166 | 167 | .content { 168 | background: white; 169 | width: 70vw; 170 | padding: 3em; 171 | box-shadow: 0 0 3em rgba(0, 0, 0, 0.15); 172 | text-align: center; 173 | margin-bottom: 1em; 174 | } 175 | 176 | .title { 177 | margin: 0 0 0.5em; 178 | text-transform: uppercase; 179 | font-weight: 900; 180 | font-style: italic; 181 | font-size: 3rem; 182 | color: #ee6352; 183 | line-height: 0.8; 184 | } 185 | --------------------------------------------------------------------------------