Mouse over on button, another div or HTML tag will side out to the left of the button

Question

Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:

HTML:

<div class="block">
<div class="normal">
    <span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
    on Twitter
</a>

CSS:

   /**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}

.block { 
    width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; 
    position: relative; 
    perspective: 350;
}
.block .normal {
    background: gray; padding: 15px; cursor: pointer;
    position:relative; z-index:2;
}
.block .hover {
    background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
    position: relative; z-index:1;
    transition: all 250ms ease;
}
.block:hover .normal {
    background: #0084b4;
}
.block:hover .hover {
    margin-right: 0; 
    transform-origin: top;
    /*
    animation-name: balance;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 110ms;
    animation-iteration-count: 1;
    animation-direction: alternate;
    */
    animation: balance 1.5s ease-in-out 110ms 1 alternate;
}

@keyframes balance { 
    0% { margin-top: 0; } 
    15% { margin-top: 0; transform: rotateX(-50deg); }  
    30% { margin-top: 0; transform: rotateX(50deg); } 
    45% { margin-top: 0; transform: rotateX(-30deg); } 
    60% { margin-top: 0; transform: rotateX(30deg); } 
    75% { margin-top: 0; transform: rotateX(-30deg); } 
    100% { margin-top: 0; transform: rotateX(0deg);} 
}

https://jsfiddle.net/9dwk8vzg/

Original link:http://dabblet.com/gist/5559193

But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/

Can you upload your code into jsfiddle or another program and link it to us, or upload the relevant code for us on here? — Matthew, Apr 01 '18 at 02:11
@Matthew, Hi I have include the codes and jsfiddle as you requested. — Meo Dows, Apr 01 '18 at 02:21
My apologies, I thought the dabblet link was not your code. I just updated your JSFiddle, is that what you're looking for? https://jsfiddle.net/9dwk8vzg/11/ — Matthew, Apr 01 '18 at 02:33
@Matthew Thanks, by the way what do change to make it work? Maybe in the further if I encounter this I will able to know what to change. — Meo Dows, Apr 01 '18 at 02:48

score 2 · Answer 1 · answered Apr 01 '18 at 02:40

/**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}

.block { 
 width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; 
 position: relative; 
 perspective: 350;
}
.block .normal {
 width: 100%;
 background: gray; padding: 15px; cursor: pointer;
 position:relative; z-index:2;
}
.block .hover {
 width: 100%;
 background: #00aced;
 padding: 15px; 
 display: block;
 position:absolute;
 color: #fff;
 text-decoration: none;
 z-index:1;
 transition: all 250ms ease;
 right: -30px;
 top: 0;
}
.block:hover .normal {
 background: #0084b4;
}
.block:hover .hover {
 right: 100%;
 transform-origin: top;
 /*
 animation-name: balance;
 animation-duration: 1.5s;
 animation-timing-function: ease-in-out;
 animation-delay: 110ms;
 animation-iteration-count: 1;
 animation-direction: alternate;
 */
 animation: balance 1.5s ease-in-out 110ms 1 alternate;
}

@keyframes balance { 
 15% { width: 95%; } 
 30% { width: 105%; } 
 45% { width: 97%; } 
 60% { width: 103%; } 
 75% { width: 97%; } 
 100% { width: 100%; } 
}

<div class="block">
 <div class="normal">
  <span>Follow me...</span>
 </div>
 <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
  on Twitter
 </a>
</div>

To the div was shown to the right, change `right: 0;` to `left: 0;` for the class `.block .hover` and `right: 100%;` to `left: calc(100% + 30px);` for the class `.block:hover .hover` — Vitaly Surkov, Apr 01 '18 at 02:52
Thanks, by the way I have another question, Using that code I was trying to make it slide out when user hover the button, I try to use > in between hover and transition: 1.4s ease 0s; , but non work. May i know what is proper way to do it? — Meo Dows, Apr 01 '18 at 05:00

Mouse over on button, another div or HTML tag will side out to the left of the button

1 Answers1