I've seen a similar question asked, but the solutions wouldn't work for how I was using the span classes. In effect, I'm using the span classes as alternate text for a hover. I'd like to ease in / ease out the classes on hover, but I can't figure out where to apply the webkit or what I'm doing wrong.
HTML
<div class="mdmg2"><span class="alias">name</span> <span class="infor">age / tz / pm</span></div>
CSS
.mdmg2 { text-transform: lowercase; color: #fff; text-align: left; font-size: 40px; text-shadow: 1px 1px 0px black, 1px 1px 0px white, 1px 1px 0px black; }
.mdmg2 .infor { display: none; }
.mdmg2:hover .alias { display: none; }
.mdmg2:hover .infor { display: inline; font-size: 30px; text-transform: uppercase; font-family: montserrat; position: relative; top: -10px; }
Interpretation
As I understand it, you want .alias to be shown when .mdmg2 is not hovered, and for .infor to be shown when it is hovered. You want to fade in-between the two.
Your Problem
You cannot animate the display property, and thus if you want to fade content it is not going to be suitable. However, there is a CSS property called opacity. This can be set to any decimal between 0 and 1, which corresponds to a percentage value of how opaque the element is (i.e. how transparent it is).
This property can be animated, so we change the display styles to use opacity instead, and add in the proper code to perform the animation. Although OP asked for webkit transitions, there is no vendor prefix for transition (see http://caniuse.com/#search=transition), so the property is just transition. You can read about it's syntax and how it works here.
Now, there is an animation on-hover, but unlike display, using opacity the old object still takes up space on the page; i.e. the two spans are not in the same space. This is obviously not right, and so to fix this, we set a width on .alias (100px). This ensures that .alias will always take up 100px, so we can move .infor to 100px to the right to ensure that the two elements line up.
Solution
Thus, the complete solution to your issue is:
.mdmg2 {
text-transform: lowercase;
color: #fff;
text-align: left;
font-size: 40px;
text-shadow: 1px 1px 0px black, 1px 1px 0px white, 1px 1px 0px black;
position:relative;
}
.mdmg2 .infor {
opacity:0;
font-size: 30px;
text-transform: uppercase;
font-family: montserrat;
transition:opacity 0.5s;
position:relative;
left:-100px;
}
.mdmg2 .alias {
opacity:1;
transition:opacity 0.5s;
width:100px;
}
.mdmg2:hover .infor {
opacity:1;
}
.mdmg2:hover .alias {
opacity:0;
}
<div class="mdmg2"><span class="alias">name</span> <span class="infor">age / tz / pm</span></div>
Related
So I have the following situation for a button I am making:
<i class="fas fa-angle-left"></i> Previous
which can be seen fully on https://jsfiddle.net/pre3xzL5/ (<i>-tag from Font Awesome).
Basically I want the text inside the button to be centered from the beginning (it isn't now), and then when I hover the arrow (<i>-tag) appears and comes from the middle to the left, and then the next should also go from the middle (centered as it should be) at moved a bit to the right. However, now, the next is starting at the place where it should be when hovered. It makes sense since the <i>-tag is taking up space, but that's the question: Can I correct this ?
I have done it using margins instead. But I've read that using margins for transitions and such is bad practice, and not good for performance - hence the try with translate.
These two transition statements are the only ones you need, set initially on the relevant elements. The position absolute changed to position relative on hover gets you the effect you want.
.button
{
transition: all 0.15s ease-in-out;
i
{
position:absolute;
transition: all 0.15s ease-in-out;
}
}
.button:hover
{
i
{
position:relative;
}
}
html:
<i class="fas fa-angle-left"></i> Previous
scss:
.button {
background: red;
padding: 20px 20px;
color: white;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
position: relative;
justify-self: center;
display: inline-block;
width: 140px;
text-decoration: none;
text-align: center;
transition: all 0.15s ease-in-out;
border: 1px red solid;
i {
position:absolute;
opacity: 0.0;
transition: all 0.15s ease-in-out;
transform: translateX(.5em);
}
}
.button:hover {
background: red;
border: 1px black solid;
i {
position:relative;
transform: translateX(0px);
opacity: 1.0;
}
}
https://jsfiddle.net/pre3xzL5/1/
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
I wanted a button to move down a few pixels on hover, but it comes back up again. Shouldn't it stay where it is while you're still hovering on it?
Email Me
.btn {background: #2ecc71; padding: .5em 1em; border-radius: 3px; color:white; font-size: 1.5em; text-shadow:2px 2px 2px #178345; box-shadow: 0px 1px 1px #21a559; transition: transform 0.5s ease 0s;}
.btn:hover {background: #28b865; transform: translate(0px, 3px);}
http://codepen.io/anon/pen/zICBw
The problem is inline element can't be transformed properly. If you set the transform right in normal state, you'll see the transform takes no effect. However it does have a little effect on animation, maybe because while animating, the element's display becomes inline-block (or block in some other cases, at least while being animated, the transform can take effect). After the animation completes, it returns back to inline. So the button's position is set back like as the translate transform has no effect.
Your button is actually an a element, which has inline display by default. You can simply change its display to inline-block or block and it works OK:
.btn {
/* ... */
display:inline-block;
}
Updated demo.
Why not simply transition top? You'll need to position the element, but it will accomplish the same without the reversion.
The problem with transitioning on transform is you change the plane the element occupies, which causes the hover state to no longer trigger. One way around this is to also apply a base transform state to the element.
Demo Fiddle
.btn {
background: #2ecc71;
padding: .5em 1em;
border-radius: 3px;
color:white;
font-size: 1.5em;
text-shadow:2px 2px 2px #178345;
box-shadow: 0 1px 1px #21a559;
transition: top .5s ease;
top:0px;
position:relative;
}
.btn:hover {
background: #28b865;
top:3px;
}
I'm trying to create an effect with list items in an unordered list.
Basically, anytime one hovers over the list, the size adjusts 2px in padding. While this properly it is also effecting the overall dimensions of the list item, thus pushing other list elements to the right and pushing the div beaneath down 2px. Anyone know of a way to remedy this issue?
All I want the list item to do during a hover is to increase padding by 2px without effecting any other elements around it.
You can find the code on jsfiddle here as well as below:
HTML
<div id="info">
<ul class="projects">
<li class="site wmhr">$
<p>What's My Hourly Rate</p>
</li>
<li class="site proud">P
<p>PROUD</p>
</li>
<li class="site mdy">M
<p>Manda Dougherty Yoga</p>
</li>
<li class="site rr">R
<p>Responsive Resume</p>
</li>
<li class="site dp">D
<p>designpairs (in progress)</p>
</li>
</ul>
</div>
CSS
.projects {
margin: 0;
padding: 0 0 50px 0;
}
.projects li {
display: inline-block;
list-style: none;
width: 70px;
height: 70px;
margin: 50px 20px 20px 0;
border: 4px solid #555;
border-radius: 50%;
font-size: 2em;
text-align: center;
line-height: 70px;
background: #414141;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.projects p {
font-size: .850rem;
line-height: 1.500em;
}
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
}
.projects li a {
font-family:'Montserrat', sans-serif;
color: #fff;
text-decoration: none;
}
.wmhr:hover {
background: #66CC6E;
border: 4px solid #57ac5e;
}
.proud:hover {
background: #5882c2;
border: 4px solid #4b6da2;
}
.mdy:hover {
background: #fec601;
border: 4px solid #ddad03;
}
.rr:hover {
background: #797b96;
border: 4px solid #606176;
}
.dp:hover {
background: #475161;
border: 4px solid #38404d;
}
If you don't want the item to move, then you have to counteract the padding with a reduction in some other dimension or change the layout structure to not use inline layout.
Here's a version of your jsFiddle that uses a reduction in the margin to counteract the increase in the padding. The hovered item gets larger, but the other items don't move.
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
margin: 48px 18px 18px 0;
}
Note, I also changed the default left margin to be 2px so I could reduce it to 0 here as I hate using negative margins (they sometimes cause objects to overlap which can introduce unexpected behaviors).
http://jsfiddle.net/jfriend00/6jjcg/
I would use a CSS transform property rather than adding padding and adjusting around it.
.projects li:hover {
transform: scale3d(1.2,1.2,1);
}
Using scale3d rather than simply scale because scale3d uses hardware acceleration. You'll also want to add -webkit and -moz prefixes for better compatibility.
jsFiddle example
I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?