How to change the images of the links on the form gk news ?

In short, when I pass the mouse over the image that leads the article, I would need to write the image of the link just above "that when clicked leads to the article" example "article title" ..... and images of social change with those of the email ....

I hope I explained ...

what I want is to replace the images that I do not need to put in a html form and image as "author" -> I pass the mouse over and come out here instead of images to social networks 1 image "mail" to contact me via email and a picture "phone" to call me ....

.. In creativity there is the original form of the technicians of the template, when I go out on the icons of social, I want to change those images that do not find them in any folder, and then I can not even add new ones without deleting existing ones that serve me in other modules ...

In mod gk news pro 5 instead the image is that of a link that would let them sit well with me, but I would like that either appeared above or below the title of where the link leads ... example ... -> image that brings in Article mod.portfolio ---> we step on ---> and here is what I see in the example image. the title of 'article "mission" ... look forward to some good soul to help me .... thanks

Hmm. Too much at once to deal with that, so my suggestion is to deal witch every step separately.

1. If You go to Creativity demo site, About seciton is made of images and "overlay" with social icons.
It is done with special formated custom html module. If You check it, You will see, that every section looks this way:

Code: Select all

   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="/gavick.com/j2/creativity/images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>


as You can see in first element there are "keywords" that creates those social icons. It is done with use of jQuery module that gets every data element and changes it into link and icon.
And the icons are not normal images, but "Font Awesome":

Code: Select all

.gkTeamOverlay a[data-type="fb"]:before {
   content: '\f09A';
}
.gkTeamOverlay a[data-type="twitter"]:before {
   content: '\f099';
}
.gkTeamOverlay a[data-type="gplus"]:before {
   content: '\f0d5';
}


(this is code from gk.stuff.css). As You can see it "sets" a font element inside each of created with jQuery icon elements.

So now when You know how it works - what would You like to do with this functionality?