How to create a pop up animation with a modal using css? - css

I have already created the modal in css, but when I try changing the transition so that it pops more like a modal instead of fading in, it doesn't work. I've tried changing the duration and the transition type but it doesn't seem to apply. Am I using the wrong transition?
See fiddle: https://jsfiddle.net/mtbh24uL/
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
My goal: to have more of a pop up effect like a real javascript modal. I basically need to create a modal like you see in the following picture. I'm not sure what the best approach is or the best plugin.

You could define a CSS animation for that and call this animation when you are clicking on the button. You can achieve this with adding the following CSS code. This is only an example to give you a rough idea of how your effect could look like. From this point you can even optimize and finetune the animation.
CSS
.overlay:target .popup{
animation: popup 0.7s;
}
#keyframes popup {
0%{
transform: scale(1);
}
50%{
transform: scale(1.4);
}
60%{
transform: scale(1.1);
}
70%{
transform: scale(1.2);
}
80%{
transform: scale(1);
}
90%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
/* transition: all 0.3s ease-out; */
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup:after {
content: '';
position: absolute;
bottom: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent white transparent;
}
.overlay:target .popup {
animation: popup 0.7s;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
60% {
transform: scale(1.1);
}
70% {
transform: scale(1.2);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>

In answer to getting the curved arrow, you can use the :after or :before pseudo element. Something like this will achieve the desired effect:
CSS
.popup:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-left: 24px solid white;
border-radius: 33px 0;
top: -18px;
left: 20px;
width: 30px;
height: 34px;
}

Related

Animation from top to bottom in CSS

I make my project in Bootstrap 4.
I have this code:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
justify-content: center;
padding-top: 5px;
position: fixed;
bottom: 25px;
right: 15px;
display: none;
z-index: 999;
transition: opacity .5s;
}
.back-to-top::before {
padding-top: 15px;
animation-name: animation-arrow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
#keyframes animation-arrow {
0% {
padding-top: 0px
}
50% {
padding-top: 5px
}
100% {
padding-top: 10px
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button"><img src="images/back.png" class="img-fluid"> </a>
I'd like to move the images / back.png up / down arrow.
(I would like the picture to move slightly up / down) - but it doesn't work
How can I repair it?
check this out:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
position: fixed;
bottom: 25px;
right: 15px;
z-index: 999;
transition: opacity .5s;
}
.back-to-top > i {
width: 15px;
height: 15px;
margin-top: 15px;
display: inline-block;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDkwLjY4OCA0OTAuNjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTAuNjg4IDQ5MC42ODg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRkMxMDc7IiBkPSJNNDcyLjMyOCwxMjAuNTI5TDI0NS4yMTMsMzQ3LjY2NUwxOC4wOTgsMTIwLjUyOWMtNC4yMzctNC4wOTMtMTAuOTktMy45NzUtMTUuMDgzLDAuMjYyDQoJYy0zLjk5Miw0LjEzNC0zLjk5MiwxMC42ODcsMCwxNC44MmwyMzQuNjY3LDIzNC42NjdjNC4xNjUsNC4xNjQsMTAuOTE3LDQuMTY0LDE1LjA4MywwbDIzNC42NjctMjM0LjY2Nw0KCWM0LjIzNy00LjA5Myw0LjM1NC0xMC44NDUsMC4yNjItMTUuMDgzYy00LjA5My00LjIzNy0xMC44NDUtNC4zNTQtMTUuMDgzLTAuMjYyYy0wLjA4OSwwLjA4Ni0wLjE3NiwwLjE3My0wLjI2MiwwLjI2Mg0KCUw0NzIuMzI4LDEyMC41Mjl6Ii8+DQo8cGF0aCBkPSJNMjQ1LjIxMywzNzMuNDE1Yy0yLjgzMSwwLjAwNS01LjU0OC0xLjExNS03LjU1Mi0zLjExNUwyLjk5NCwxMzUuNjMzYy00LjA5My00LjIzNy0zLjk3NS0xMC45OSwwLjI2Mi0xNS4wODMNCgljNC4xMzQtMy45OTIsMTAuNjg3LTMuOTkyLDE0LjgyLDBsMjI3LjEzNiwyMjcuMTE1bDIyNy4xMTUtMjI3LjEzNmM0LjA5My00LjIzNywxMC44NDUtNC4zNTQsMTUuMDgzLTAuMjYyDQoJYzQuMjM3LDQuMDkzLDQuMzU0LDEwLjg0NSwwLjI2MiwxNS4wODNjLTAuMDg2LDAuMDg5LTAuMTczLDAuMTc2LTAuMjYyLDAuMjYyTDI1Mi43NDQsMzcwLjI3OQ0KCUMyNTAuNzQ4LDM3Mi4yODEsMjQ4LjAzOSwzNzMuNDA4LDI0NS4yMTMsMzczLjQxNXoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
}
.bounce {
animation: bounce 2s infinite;
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button">
<i class="arrow bounce"></i>
</a>

Weird overlay / flicker on css animation

When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.
Any help appreciated.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%);
}
50% {
transform: scale(100%);
}
100% {
transform: scale(0%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I think your problem is similar to this. CSS Animation break transform
Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
display: flex;
}
.center {
margin: auto;
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%) translate(-50%,-50%);
}
50% {
transform: scale(100%) translate(-50%,-50%);
}
100% {
transform: scale(0%) translate(-50%,-50%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>

Blurry content at ::after (pseudo element) for mobile version (Animated CSS Button)

I created a call-to-action button that makes a small animation on click:
Static and showing ADD TO CART
On click: Background animation (duration 1sec) and content = 'Adding to cart'
After 1sec: New background colour and showing ADDED TO CART Go to Cart
Button template:
Basically, I used the ::after to change the background colour as a progress bar and ::before to the content to ADDING TO CART.
All works perfect BUT the text ADDING TO CART is blurry on the mobile version.
Print on the desktop and mobile:
The relevant code:
changeBtn() {
addCartEl.classList.add('global__main-btn--active');
addCartEl.innerHTML = "Added to cart<span>Go to cart</span>"
}
$('#add-to-cart').on('click', changeBtn());
#keyframes adding {
0% {
width: 0%;
opacity: 1;
}
99% {
width: 99%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
}
}
#keyframes txt-adding {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes added {
0% {
color: transparent;
background-color: #6abf58;
}
100% {
color: #b4dfab;
background-color: #3f7634;
}
}
.global__main-btn {
font-size: 20pt;
font-weight: 700;
text-transform: uppercase;
color: white;
background-color: green;
padding: 1rem 5rem;
width: 100%;
border-radius: 0.5rem;
border: 1px solid green;
border-bottom: 4px solid green;
margin-bottom: 0.5rem;
max-width: 450px;
}
.global__main-btn::before {
content: "";
background-color: white;
mask-image: url("../assets/svg/cart-plus-solid.svg");
position: relative;
float: left;
width: 30px;
height: 27px;
}
.global__main-btn:hover {
box-shadow: inset 0 0 4rem green;
cursor: pointer;
}
.global__main-btn--active {
border: none;
padding: 0.6rem 5rem;
position: relative;
color: transparent;
animation: added 0.2s 0.8s normal linear forwards;
min-height: 66px;
}
.global__main-btn--active span {
display: block;
font-weight: 300;
font-size: 12pt;
}
.global__main-btn--active:hover {
box-shadow: inset 0 0 4rem green;
}
.global__main-btn--active::before {
content: "";
width: 100%;
height: 100%;
background-color: green;
border-radius: 0.5rem;
position: absolute;
top: 0;
left: 0;
mask-image: none;
animation: adding 1s normal linear forwards;
}
.global__main-btn--active::after {
content: "Adding to cart";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
color: white;
animation: txt-adding 1s normal linear forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="buy__btn global__main-btn" id="add-to-cart">Add to cart</button>
I had a similar issue and figured it has to do with the transform property. As soon as i added a transformation, the text got blurry. Removing it will solve the problem. This seems to be a webkit or blink engine bug.

Hover Effect Ideas

I'm using a development named "Hover Effect Ideas" (Warm Oscar) available on internet, the purpose of which is to add an effect to hovering an image :
https://codepen.io/anon/pen/zapzzE
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #f6f9fa;
color: #536d76;
font-weight: 400;
font-size: 1em;
font-family: "Raleway", Arial, sans-serif;
}
a {
color: #4f7f90;
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
color: #39545e;
}
.grid {
overflow: hidden;
margin: 0;
padding: 3em 0 0 0;
width: 100%;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: -0.135em;
width: 33.333%;
height: 400px;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar {
background: -webkit-linear-gradient( 45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58, 52, 42, 0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
figure.effect-oscar figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: "";
}
figure.effect-oscar h2 {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.effect-oscar figcaption::before,
figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
figure.effect-oscar:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58, 52, 42, 0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}
#media screen and (max-width: 69.5em) {
.grid figure {
width: 50%;
}
.grid figure figcaption {
font-size: 90%;
}
}
#media screen and (max-width: 41.5em) {
.grid figure {
width: 100%;
}
}
<div class="container">
<div class="grid">
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2>Here I have <span>two lines</span>or more .......................</h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
</div>
</div>
<!-- /container -->
I have titles sometimes on one line and sometimes on two lines.
I'm having trouble aligning these titles like this :
Alignement of titles
When there are two or more text lines, the titles are shifted.
CSS is not for me! Can you help me please ?
The h2 is initially offset from the top using transform: translate3d(0, 100%, 0).
This moves the element on the y axis, and is causing a different displacement depending on the overall height of the element (I think).
You could transition the top value instead. To do this, add position: relative to the h2, and give it an initial value (top: 50px in the example below). On hover set top: 0.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #f6f9fa;
color: #536d76;
font-weight: 400;
font-size: 1em;
font-family: "Raleway", Arial, sans-serif;
}
a {
color: #4f7f90;
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
color: #39545e;
}
.grid {
overflow: hidden;
margin: 0;
padding: 3em 0 0 0;
width: 100%;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: -0.135em;
width: 33.333%;
height: 400px;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar {
background: -webkit-linear-gradient( 45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58, 52, 42, 0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
figure.effect-oscar figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: "";
}
figure.effect-oscar h2 {
margin: 20% 0 10px 0;
transition: top 0.35s;
position: relative;
top: 50px;
}
figure.effect-oscar figcaption::before,
figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
figure.effect-oscar:hover h2 {
top: 0;
}
figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58, 52, 42, 0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}
#media screen and (max-width: 69.5em) {
.grid figure {
width: 50%;
}
.grid figure figcaption {
font-size: 90%;
}
}
#media screen and (max-width: 41.5em) {
.grid figure {
width: 100%;
}
}
<div class="container">
<div class="grid">
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2>Here I have <span>two lines</span>or more .......................</h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
</div>
</div>
<!-- /container -->

Transform Scale Causing Gaps/Lines

I'm building a website currently and am experiencing issues with transform: scale. I've got a button, and when a user hovers over it, two things happen:
A background "sweeps" in diagonally
The button label colour changes
The button grows slightly
I have got this working, and it looks really nice, but after implementing point 3, I'm seeing a weird gap to the left hand side when the button grows.
Here is my code: click for demo
HTML
Hover
CSS
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
border: 3px solid green;
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 20px 35px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
transform: scale(1.1);
}
And here's a screenshot of the gap I'm seeing. This issue occurs in Chrome and Safari (I haven't tested Firefox or IE as I can't download them at work).
Screenshot of weird gap
It "only" appears in Chrome but not Firefox (edit: worse in Edge: first it's on the left then on bottom...). Not sure if a rounding error or something else is the cause of that gap, but I find that replacing border by a box-shadow improves the rendering.
There's still a gap that can be seen near the end of the transition but finally disappears so I added 2 box-shadows on :hover: the new one is inset and fills the gap between "border/box-shadow" and content box faster.
Codepen: http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 19px 34px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: transform ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
transform: scale(1.1);
}
Hover
EDIT: playing with the size of the transitioned :pseudo
.button:before {
content: ' ';
transition: all ease-out .25s;
width: calc(200% + 6px);
height: calc(100% + 6px);
position: absolute;
top: -3px;
left: -3px;
transform-origin: 0 3px;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
to take into account the border but that doesn't change anything because of overflow: hidden.
So here's my third try: by adding a container (or having the A element as a container) and keeping the border on the child element, it makes that gap disappear (overflow is around the border).
Codepen: http://codepen.io/PhilippeVay/pen/ZBbKWd
body {
text-align: center;
padding-top: 10%;
}
a {
display: inline-block;
overflow: hidden;
background: transparent;
transition: all ease .25s;
color: green;
position: relative;
z-index: 2;
font-family: sans-serif;
text-decoration: none;
}
a > span {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
border: 3px solid green;
padding: 20px 35px;
}
a:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
a:hover:before {
transform: translateX(0);
}
a:hover {
color: white;
transform: scale(1.1);
}
<span class="bd">Hover</span>
Fx transitions till the end flawlessly... and "corrects" the width by adding 2px on the right. But it's already visible in your jsbin so it's another story (and less annoying I guess as user will have clicked by then imho)

Resources