I'm trying to get my my button to transition on hover so the button squeezes to the left. However, there is no transition occurring on hover. Any suggestions?
.BtnEvents {
background-color: #048431;
/* FRB Green */
margin: 10px 0px;
padding: 16px 30px;
height: 50px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
fit: fill;
display: inline-block;
overflow: visible;
color: white;
font-size: 18px;
font-family: 'Sofia Pro', sans-serif;
line-height: 20px;
text-decoration: none;
position: static;
border: 0;
cursor: pointer;
font-weight: 400px;
}
.BtnEvents:hover {
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
}
Register Now!
.BtnEvents {
background-color: #048431;
/* FRB Green */
margin: 10px 0px;
padding: 16px 30px;
height: 50px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
fit: fill;
display: inline-block;
overflow: visible;
color: white;
font-size: 18px;
font-family: 'Sofia Pro', sans-serif;
line-height: 20px;
text-decoration: none;
border: 0;
cursor: pointer;
font-weight: 400px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
}
.BtnEvents:hover {
width: 200px;
}
Register Now!
Related
How can I make padding for an arrow move the arrow to right on hover?
That is, arrow moves from the text to the right, and when hover disappears, it returns to its place.
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
}
#next:before{
content:"Next";
position:absolute;
color:#383736;
right: 50%;
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
padding-right: 5px;
}
#next:hover:before{
right:100%;
transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-webkit-transition: 0.6s ease-in;
opacity:1;
}
<a id="next"><span class="arrow">⟶</span></a>
You can use a translation on the arrow element (the span):
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
}
#next:before {
content:"Next";
position:absolute;
color:#383736;
right: 50%;
opacity: 0;
transition: 0.6s ease-in;
padding-right: 5px;
}
#next:hover:before {
opacity: 1;
}
#next span {
display: inline-block;
transition: 0.6s ease-in;
}
#next:hover span {
transform: translateX(50%);
}
<a id="next"><span class="arrow">⟶</span></a>
try this...
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
}
#next:before{
content:"Next";
position:absolute;
color:#383736;
left: 50%; // <--- here
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
padding-right: 5px;
}
#next:hover:before{
left:100%; // <--- here
transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-webkit-transition: 0.6s ease-in;
opacity:1;
}
I have a Login "Button", when hovering, a login Form should become visible. It should expand from the button.
It works fine on hover, but when the mouse leave the button (hover off) the transition is not working.
Hope it is clear, what i want to achiev.
Here is a simplified fiddle with the problem:
https://jsfiddle.net/ze7qpx02/
Thank you!
body{
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.child{
position: absolute;
height: 0px;
width: 100%;
bottom: 0;
right: -1px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover .child{
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
border-style: solid;
border-width: thin;
border-top-style: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
<div class="parent">
Login
<div class="child">
</div>
</div>
Since you add the border to child only when the parent is hovered, it disappears immediately when the hover end. You can add the border to the child with a transparent color, and change the color when hovered.
btw - unless the transitions change when hovered, you can set them only on the elements, no need to include them again on the hovered state.
body {
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
}
.child {
position: absolute;
height: 0px;
width: 100%;
bottom: 0;
right: -1px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
border: transparent solid thin;
border-top-style: none;
}
.parent:hover .child {
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
border-color: black;
}
<div class="parent">
Login
<div class="child">
</div>
</div>
Actually the transition is working. Your problem is the border get lost suddenly. So copy this to your .child, you will see that is working;
border-style: solid;
border-width: thin;
border-top-style: none;
The transition works but you cannot 'see' it because .child does not have border set on it's default style. The border is only on parent hover. So when you 'un hover' , the border disappears instantly.
So you should set the border to the default style ( transparent if you want ) and then on hover set a a color to that border . Also, transitions don't have to be used on both default and hover state. ( if they are the same ) . Use them only on default styles and so they will work on both states.
See snippet below
body {
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
}
.child {
position: absolute;
height: 0px;
width: 0px;
bottom: 0;
right: -1px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border-style: solid;
border-width: thin;
border-top-style: none;
border-color: transparent;
}
.parent:hover .child {
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
border-color: red;
}
<div class="parent">
Login
<div class="child">
</div>
</div>
Its working Try this....
body{
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.child{
position: absolute;
height: 0px;
width: 100%;
bottom: 0;
right: -1px;
border-style: solid;
border-width: thin;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover .child{
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
<div class="parent">
Login
<div class="child">
</div>
</div>
I am trying to change the colour of an h2 tag inside a div.
The other elements inside this div change to white colour when hovered over, only the h2 does not change colour.
I know I can change this in CSS... .well.sb:hover, .well.sb:hover h2, but the bad thing with that is that the h2 part changes colour separately from the rest. When hovering over the whole thing, everything (including h2) should change text-color into white at the same time and at the same speed and for the same one big and only div section. How to make that work?
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
There are 2 things happening. First, you need to target the h2 more specifically (it's overriding your hover styles). Second, you have conflicting transitions.
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
/* -moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease; */
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover h2.title-article-sidebar {
color: #FFF;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
Just remove color: #444; from h2.title-article-sidebar
Recent version of chrome tend to add transitions in nested elements (not sure about it is a bug or a feature).
Just make sure that children don't have an inherited transition
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sb * {
transition: 0s;
}
<div class="well sb">
<div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div>
</div>
This will solve it:
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
/* color: #444;*/
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
You don't have any problem in your animation as mentioned in some other answers. You have correctly written your code nor there is any specificity problem.
I am attaching a codepen link on which I was trying to solve your problem:
http://codepen.io/Sky-123/pen/mALGQZ
The animations remains intact as you have written them. The only change that I did was added the color:#444 to h2 tag through an inline statement and then removed it on hover in jQuery as it was causing concerns in animation..
Hope it solves your problem.
I am working on a menu that pops up at the right side of the screen.
https://jsfiddle.net/grhajrbp/
Html:
<div id="east-exit">
<div id="mail-option">
<a ng-click="controller.openEmails()"><i class="communicate-icon mail fa fa-envelope"></i></a>
<a><i class="new-mail fa fa-plus-circle"></i></a>
</div>
<a><i class="communicate-icon fa fa-comments"></i></a>
<i class="east-exit-icon fa fa-arrow-right"></i>
<a><i class="communicate-icon fa fa-phone"></i></a>
<a><i class="communicate-icon fa fa-camera"></i></a>
</div>
CSS:
html {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
#east-exit {
display: flex;
opacity: 1;
z-index: -1;
align-items: stretch;
justify-content: space-around;
flex-direction: column;
position: absolute;
right: 0;
height: 100%;
width: 85px;
font-size: 55px;
}
#east-exit:hover .east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
opacity: 0;
}
#east-exit:hover .communicate-icon {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
#east-exit:hover,
#mail-option:hover,
.mail:hover .new-mail {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
font-size: 45px;
opacity: 0.1;
}
.communicate-icon {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.new-mail {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
color: grey;
cursor: pointer;
}
The menu shows four buttons. If I were to hover over the mail button, a small plus button should present itself next to the mail button. I'm currently only trying to get the plus button to show on hover (it is not at the right place yet. I can't get the plus button to show on hover of the mail button. Does anyone know how to do this?
Moreover, I also tried to get the button at the right place with flexbox. (The images below show where it is supposed to go). I couldn't get this to work either. Does anyone have any suggestions I could try? First image:
Second image:
Third image:
You can use the following css rule
.communicate-icon.fa.fa-envelope:hover {
background: url(<image name>);
background-repeat: no-repeat;
background-position: -40px 0; // Change as needed
}
You will also need to make your div wider or the background image will not be displayed.
Dear Stackoverflow readers,
Using only CSS3, how do I show a div after a transition is completed.
This is the snippet of HTML I'm working with
<div class="biography">
<p>Title</p>
<p id="moreBio">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
This is the snippet of CSS3 I'm working with
.biography {
width: 100px;
height: 40px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.biography:hover {
width: 200px;
height: 600px;
margin: 10px 10px 0px -100px;
opacity: 1;
background: #7C7C7C;
}
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
}
#moreBio:hover {
opacity: 1;
}
I want #moreBio to show after the transition is completed, how would I go about doing that?
Thank you so much in advance.
Add a transition-delay to #moreBio equal to the transition time of .biography, and make the appearance trigger when .biography is hovered upon.
#moreBio {
opacity: 0;
transition: opacity 0.5s 0.5s ease;
-webkit-transition: opacity 0.5s 0.5s ease;
-o-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
}
.biography:hover #moreBio {
opacity: 1;
}
Instead of doing #moreBio:hover you could do .biography:hover #moreBio and then add a delay for the #moreBio transition like so
// ... other code just like it's
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.biography:hover #moreBio {
opacity: 1;
}
Here is the working sample.