Styjun

Why do we say “un seul M” and not “une seule M” even though M is a “consonne”?

Would a grinding machine be a simple and workable propulsion system for an interplanetary spacecraft?

MT "will strike" & LXX "will watch carefully" (Gen 3:15)?

How can I prove that a state of equilibrium is unstable?

Prodigo = pro + ago?

Is a distribution that is normal, but highly skewed, considered Gaussian?

How to show a landlord what we have in savings?

How should I connect my cat5 cable to connectors having an orange-green line?

Why doesn't Shulchan Aruch include the laws of destroying fruit trees?

Incomplete cube

Why can't we say "I have been having a dog"?

How can the PCs determine if an item is a phylactery?

pgfplots: How to draw a tangent graph below two others?

Create custom note boxes

Car headlights in a world without electricity

Is this a new Fibonacci Identity?

Find a path from s to t using as few red nodes as possible

Finitely generated matrix groups whose eigenvalues are all algebraic

Calculating discount not working

Mathematica command that allows it to read my intentions

Is it correct to say moon starry nights?

Airship steam engine room - problems and conflict

Is it a bad idea to plug the other end of ESD strap to wall ground?

How to compactly explain secondary and tertiary characters without resorting to stereotypes?

My :hover seem to be in conflict with something

1

Hello (baguette english here)
so i got a logo that should go down as you pass the cursor on it but it don't work at all and i don't know why here my code :

.facebook
 left: 0%;
 top:-10%;
 animation-name: logofb;
 animation-duration: 0.5s;
 animation-delay: 7.5s;
 animation-fill-mode: forwards;
 transition-property: top;
 transition-duration: 0.5s;


@keyframes logofb 
 from top:-10%;
 to top: 0%;


.facebook:hover 
 top: 50px;

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo 
 position: fixed;
 z-index: 200;
 top: 0px;

The problem could come that it already have a animation that happen before

html css animation hover

share|improve this question

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a reason you're doing this with keyframes instead of transform?
  
  – jdfink
  Mar 21 at 20:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i don't know i just follow guide in internet
  
  – Sgt Shepard
  Mar 21 at 20:33
  

  
  
  
  

add a comment | 

1

Hello (baguette english here)
so i got a logo that should go down as you pass the cursor on it but it don't work at all and i don't know why here my code :

.facebook
 left: 0%;
 top:-10%;
 animation-name: logofb;
 animation-duration: 0.5s;
 animation-delay: 7.5s;
 animation-fill-mode: forwards;
 transition-property: top;
 transition-duration: 0.5s;


@keyframes logofb 
 from top:-10%;
 to top: 0%;


.facebook:hover 
 top: 50px;

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo 
 position: fixed;
 z-index: 200;
 top: 0px;

The problem could come that it already have a animation that happen before

html css animation hover

share|improve this question

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a reason you're doing this with keyframes instead of transform?
  
  – jdfink
  Mar 21 at 20:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i don't know i just follow guide in internet
  
  – Sgt Shepard
  Mar 21 at 20:33
  

  
  
  
  

add a comment | 

Hello (baguette english here)
so i got a logo that should go down as you pass the cursor on it but it don't work at all and i don't know why here my code :

.facebook
 left: 0%;
 top:-10%;
 animation-name: logofb;
 animation-duration: 0.5s;
 animation-delay: 7.5s;
 animation-fill-mode: forwards;
 transition-property: top;
 transition-duration: 0.5s;


@keyframes logofb 
 from top:-10%;
 to top: 0%;


.facebook:hover 
 top: 50px;

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo 
 position: fixed;
 z-index: 200;
 top: 0px;

The problem could come that it already have a animation that happen before

html css animation hover

share|improve this question

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

.facebook
 left: 0%;
 top:-10%;
 animation-name: logofb;
 animation-duration: 0.5s;
 animation-delay: 7.5s;
 animation-fill-mode: forwards;
 transition-property: top;
 transition-duration: 0.5s;


@keyframes logofb 
 from top:-10%;
 to top: 0%;


.facebook:hover 
 top: 50px;

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo 
 position: fixed;
 z-index: 200;
 top: 0px;

.facebook
 left: 0%;
 top:-10%;
 animation-name: logofb;
 animation-duration: 0.5s;
 animation-delay: 7.5s;
 animation-fill-mode: forwards;
 transition-property: top;
 transition-duration: 0.5s;


@keyframes logofb 
 from top:-10%;
 to top: 0%;


.facebook:hover 
 top: 50px;

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo 
 position: fixed;
 z-index: 200;
 top: 0px;

.facebook
 left: 0%;
 top:-10%;
 animation-name: logofb;
 animation-duration: 0.5s;
 animation-delay: 7.5s;
 animation-fill-mode: forwards;
 transition-property: top;
 transition-duration: 0.5s;


@keyframes logofb 
 from top:-10%;
 to top: 0%;


.facebook:hover 
 top: 50px;

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>


.reslogo 
 position: fixed;
 z-index: 200;
 top: 0px;

share|improve this question

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

share|improve this question

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

asked Mar 21 at 19:53

Sgt ShepardSgt Shepard

133

1 Answer
1

active

oldest

votes

0

You've got a mix of units and positioning happening can be simplified. You can achieve this easily using transform:translateY():

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

share|improve this answer

answered Mar 21 at 20:37

jdfinkjdfink

814

add a comment | 

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55288311%2fmy-hover-seem-to-be-in-conflict-with-something%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You've got a mix of units and positioning happening can be simplified. You can achieve this easily using transform:translateY():

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

share|improve this answer

answered Mar 21 at 20:37

jdfinkjdfink

814

add a comment | 

0

You've got a mix of units and positioning happening can be simplified. You can achieve this easily using transform:translateY():

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

share|improve this answer

answered Mar 21 at 20:37

jdfinkjdfink

814

add a comment | 

You've got a mix of units and positioning happening can be simplified. You can achieve this easily using transform:translateY():

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

share|improve this answer

answered Mar 21 at 20:37

jdfinkjdfink

814

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

.facebook 
 display:block;
 transform:translateY(-10%);
 transition:transform .5s ease;


.facebook:hover 
 transform:translateY(0);

<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>

share|improve this answer

answered Mar 21 at 20:37

jdfinkjdfink

814

answered Mar 21 at 20:37

jdfinkjdfink

814

answered Mar 21 at 20:37

jdfinkjdfink

814