I'm trying to scale the :before content of my <span> when hovering over it. So far the style gets applied when hovering but there are no visual changes, the :before remains the same scale.
What I've got so far:
<div class="comment-actions">
<span class="comment-likes icon-ico-heart">
12
</span>
</div>
SASS (CSS):
.comment-likes
transition: all 100ms ease-in-out
color: #92a3b9
cursor: pointer
&:hover::before
transform: scale(1.5)
Icomoon:
.icon-ico-heart:before {
content: "\e914";
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Increase the font-size on hover and add transition property to it.
.icon-ico-heart:before {
font-size: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.icon-ico-heart:hover:before {
font-size: 15px;
}
You can use just transition: font 0.3s ease; to apply transition only for font instead of all
Don't transform it with the scale property but use the font-size. So:
.icon-ico-heart:hover:before {
font-size: 20px;
}
You may not able to use the scale property for fonts or icon fonts,
Instead of this you can use font size property.
You can't transform the ::before element because it's display type is: display: inline,
you have to change it to display: inline-block or another.
.icon-ico-heart:before {
content: "\e914";
display:inline-block;
}
Related
I have an input field with a placeholder. On focus of it, I need a transition of placeholder and it should stay at a different position.
I cannot modify the HTML as it's getting generated from a plugin.
I have achieved the transition, but the placeholder disappears after it.
Need it by CSS-only.
Demo
.container {
margin-top: 80px;
}
input {
width: 500px;
font-size: 16px;
}
input::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease, font-size 0.3s ease;
transition: all 0.3s ease, font-size 0.3s ease;
}
input:hover::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease, font-size 0.3s ease;
transition: all 0.3s ease, font-size 0.3s ease;
}
input:focus::-webkit-input-placeholder {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-transition: all 0.4s ease, font-size 0.4s ease;
font-size: 12px;
transition: all 0.4s ease, font-size 0.4s ease;
}
<h3>Todo: Make placeholder persistent</h3>
<div class="container">
<input type="text" placeholder="This placeholder should stay" />
</div>
Since we cannot change the HTML we will have to use a pseudo-element...and a new pseudo-class to target the .container when the input receives :focus
:focus-within
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus
.container {
margin-top: 80px;
position: relative;
}
.container::before {
content: "This placeholder should stay";
position: absolute;
font-size: 16px;
color: grey;
top: 0;
opacity: 0;
}
.container:focus-within::before {
font-size: 12px;
top: -100%;
opacity: 1;
transition: all 0.4s ease;
}
input {
width: 500px;
font-size: 16px;
}
input:focus::-webkit-input-placeholder {
opacity: 0
}
<h3>Todo: Make placeholder persistent</h3>
<div class="container">
<input type="text" placeholder="This placeholder should stay" />
</div>
You need to achieve this effect with the inputs <label>. You can't achieve it with a placeholder as this is how placeholders work, you can't not hide them when there is focus.
If you position: absolute the <label> over the input then you can transform: translateY() it to achieve the same effect you have there.
Edit: To add this should provide you slightly better UX and accessibility by doing this with a label instead of relying on the placeholder as well.
This is also a very simple version of what you want to achieve: http://plnkr.co/edit/WCdSajNRyM4mj4GBXCHh?p=preview
I've a h1 text that is very faded on a background. Once you roll over it / hover over the block that it is in, it slowly start to light up until it is completely white. This is great and just like I want it to be. Here's the problem. Once you leave the hover, the color goes back to being faded. I'd like for it to stay white as the whole point of having it faded is that it should not be in your sight until you are hovering past it.
TL:DR / When I hover a h1 it starts to light up, I want the new color to remain after you remove the hover.
The HTML I use
<h1 style="color: #fff;">Sammen flytter vi<br> de digitale grænser.</h1>
The CSS I use
.lovernemarketingtitle h1 {
font-size: 50px;
line-height: 54px;
font-weight: 900;
opacity: 0.5;
}
.lovernemarketingtitle:hover h1 {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
SOLUTION BY PRAVEEN KUMAR
http://jsbin.com/dufarofoto/1/edit?html,css,output
Use transition-delay, but beware, improper use affects the hovered state as well.
a {text-decoration: none; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 3px; line-height: 1; color: #000; transition: all 0.5s linear 2s;}
a:hover {transition: all 0.5s linear 0s; background: #ccf;}
Hover Me<br />
Lights up immediately but goes back after 2 seconds.
ps: There's no opacity: 2.
I'm getting this weird css bug. It almost seems like a caching issue or something with chrome as I can't replicate locally.
I send the user an invite and if they go to the invite page and then return to any other page that shows the banner, it's displayed wrong as one line of text is in times new roman.
The bug only happens if you've not been to the site before and you go to invite page then click back to any other page that has the banner.
2 things I've noted that are really unusual and I'm struggling to understand are:
The text that is displaying incorrectly is one word in an <a>
element, but parts of the text are fine.
When I open inspector and toggle any part of the css for the element.
It resets to how it should look immediately.
Here are some pictures:
How the banner looks
How it usually/should look
The <a> tag containing the button
As a sidenote I'm using chrome and rails 4 without turbolinks. Here is the code for the button:
.childminder-banner .btn {
padding: 3px 1em;
}
.btn-blue {
background: #34A9CD;
color: white;
}
.btn {
color: white;
-webkit-transition: none .1s ease-out 0s;
transition: none .1s ease-out 0s;
-webkit-transition-property: color,background,border;
transition-property: color,background,border;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
position: relative;
display: inline-block;
line-height: 1.5;
font-family: "Gordita";
font-weight: 500;
border-radius: 3px;
cursor: pointer;
text-align: center;
-webkit-transition: border-color .1s ease-out,background-color .1s ease-out,color .1s ease-out;
transition: border-color .1s ease-out,background-color .1s ease-out,color .1s ease-out;
background-color: #FF8027;
border-color: #FF8027;
}
Give style to the anchor tag display:inline-block
a{
display:inline-block;
}
Does anyone know how to recreate this link effect that is done in jQuery in pure CSS3?
The effect can be seen at: http://www.yuhong-ng.com/
Same html :
<a href="#" id="liveshows" style="margin-top: -40px;">
<span class="top">Live Shows</span>
<span class="bottom">Live Shows</span>
</a>
Same base CSS :
#navigation li a {
height:80px;
font-size: 18px;
font-family: 'PT Sans Narrow';
font-weight: bold;
}
#navigation li,#navigation li a {
float: left;
}
#navigation li a span {
display:block;
height:32px;
padding:8px 20px 0 20px;
cursor:pointer;
}
An some new CSS3 stuff :
#navigation li a {
-webkit-transition: margin-top 500ms linear;
-moz-transition: margin-top 500ms linear;
transition: margin-top 500ms linear;
}
#navigation li a:hover {
margin-top: -40px;
}
So, what happens here ?
On hover, your JavaScript animates the margin property to -40px. Simple stuff.
So, in CSS, you need a transition property and, on :hover, change the margin. Same stuff.
A better version would use 3dtransforms, because it avoids repainting. It depends really if this effect is alone on your page (then transition on margin is fine) or if the website is "effect rich" (then repaints are to be tracked and eliminated.)
#navigation li a {
-webkit-transition: -webkit-transform 500ms linear;
-moz-transition: -moz-transform 500ms linear;
transition: -ms-transform 500ms linear;
transition: transform 500ms linear;
}
#navigation li a:hover {
-webkit-transform: translate3d(0,-40px,0px);
-moz-transform: translate3d(0,-40px,0px);
-ms-transform: translate3d(0,-40px,0px);
transform: translate3d(0,-40px,0px);
}
More about repaints (must see video) : http://www.youtube.com/watch?v=x0VR3lUOpdc
I have a simple language select page with pure CSS animated transitions. I've made a jsFiddle here.
How it's supposed to behave is as follows:
User mouses over one of two (or more) language selectors.
That language selector transitions upward and comes to full opacity. The relevant language text (e.g., English, Español) appears as well.
The user either clicks on the link or mouses out, in which case the transition reverses.
In Chrome, it behaves as expected.
In Firefox, when I mouse over one image, both move up.
In Opera, it behaves mostly as expected, but the text jumps back down after moving up.
I'm trying to understand why this would happen in these browsers, and how I can fix it, if possible.
In the case that jsFiddle is down, the relevant code is:
HTML
<div id="container"><div id="cell">
<div class="langcell"><a href="en/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
</div>
<div class="langcell"><a href="es/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Español</p></a>
</div>
</div></div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
display: table;
}
#cell {
display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
display: inline-block;
margin: auto 1em;
}
a {
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
color: black;
text-decoration: none;
}
a:hover {
top: -16pt;
}
a p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover p {
opacity: 1;
}
a img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover img {
opacity: 1;
}
I got weird problems on firefox(v12) as well, where it was moving both elements up on hover. Later versions (19v), it seemed resolved.
I think there was something going on with your selectors and how mozilla interprets things versus webkit. See if this jsfiddle works for you.
All I really did was change a lot of the selectors of a to .langcell and it seem to work. I had to re-adjust a bit of css to achieve the same style, like the nested .langcell a selector. I have a suspicion that it may be due to a being inline by default while p is block and img is inline-block.
I won't lie and say I understand fully why that was happening to begin with, but just in general, giving styles to classes over elements is not just a preference, it is more efficient at render time as well.
CSS Selector Performance
Code:
.langcell {
display: inline-block;
margin: auto 1em;
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
}
.langcell a {
color: black;
text-decoration: none;
}
.langcell:hover {
top: -16pt;
}
.langcell p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.langcell:hover p {
opacity: 1;
}
.langcell img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
langcell:hover img {
opacity: 1;
}
CSS3 is pretty new. And many of the features are still not compatible in many browsers. Compatibility Chart
So it is kind of off-putting if your clients have a bit older browsers (even if they have a year old version), in which case CSS3 transition wont work.
Your safest bet to make the transition is to do it using javascript or some javascript library such as jQuery