I am working on a simple transition animation where I need to hide text (A href) initially using "display: none" and then make it visible with "display: block" after an image passes through it, triggered by a click event in JavaScript. Check out my code snippet here: http://jsfiddle.net/ofy4t5a8/
#facebook_text a {
position: absolute;
font-size: 15px;
color: #000;
text-decoration: none;
margin-left: 50px;
margin-top: -10px;
z-index: 1;
display: none;
}
#facebook_image.fly {
position: absolute;
margin-left: 125px;
margin-top: 0px;
transition: all 5s ease-out;
}
#facebook_image img {
position: absolute;
z-index: 10;
height: 35px;
width: 35px;
margin-top: -15px;
}
<div id="facebook_text">
<a href="google.com" alt="facebook" target="_blank">Facebook</a>
</div>
<div id="facebook_image">
<img class="image_animation" src="facebook.jpg"></img>
</div>
<script>
document.querySelector('.image_animation').onmouseover=function() {
var d = document.getElementById("facebook_image");
d.className = d.className + " fly";
}
</script>