CSS how to make blink icon go back and forth?

3

Hello, I want a help in this CSS code, I want it to appear when the person moves the mouse over the ngç, the icon (image ex: heart) tried using display: none but did not work

Here's the css:

.ask-data .action a.ask-share, .ask-data .action a.ask-like {
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    padding: 5px 4px 4px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
}
.ask-data i.like {
    background-image: url("../img/ask.png?x=2");
    background-position: -73px -93px;
}
.ask-data i.like:hover {
    background-image: url("../img/ask.png?x=2");
    background-position: -73px -108px;
}
    
asked by anonymous 15.12.2017 / 00:57

1 answer

0

Use the opacity element, as it does not add up with the element, it only hides, being able to use listeners , remembering that opacity only accepts alpha , that is, it goes from 0 to 1.

.ask-data i.like {
    opacity: 0;
}
.ask-data i.like:hover {
    opacity: 1;
}
    
15.12.2017 / 01:10