replacing social icons with a button and hover effect

Hello everyone, I have just installed the template creative and I love the effects of CSS that are already scheduled and so I have a small question. In the about page I should apply the same effect by changing the icons. Should I apply the same effect by changing the icons that I have to embed images with a link to a wikipedia page and instead of the social button, insert the read more button, click on the image to make sure that you open the wikipedia page.
It would be great if you could give me a hand here. Thank you very much for your efforts and best regards

Hi

Sorry, but I do not understand. Can You please tell me which effect You have in mind and where do You want to attached it to ?

Then in the about page, the page where there is a team, I have to change the picture, and replace the social icons with a button that says "read more" that directs me to a wikipedia page, leaving the hover effect on the photo. It's possible? I don't know if I was not clear

Hi

I'm still not sure if I understand, but I'll try to explain how to change links and icons in "About" module. This module is a regular Custom HTML module, but all changes to it needs to be done in HTML mode or better when editor is disabled to avoid stripping code from it.

Here is a code for HTML:

Code: Select all

<div class="gkTeam col4 animate_queue">
   <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="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
   <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="images/demo/about/2.jpg" border="0" alt="Julia Morena" />
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>
   <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="images/demo/about/3.jpg" border="0" alt="Eddy Doe" />
      <figcaption>
         <h3>Eddy Doe</h3>
         <small>Customer Support</small> </figcaption>
   </figure>
   <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="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>
</div>
<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>


as You can see in this code You can set the url for fb/google/twitter so a link to read more can be replaced here.

Next step is an icon which can be overwritten via css by modification of this class loading awsome font char:

Code: Select all

.gkTeamOverlay a[data-type="fb"]:before {
    content: "";
}


the above is for fb, but rest will be similar.

Hmmmmm no that's not what I meant because, on reflection, I expressed badly. What I want to do in the about page, is upload my photos instead of the team and leaving the default animation, replace the social icons with a single button "read more" that directs me to a wikipedia page. It's possible? Should I report the code that you have written to me over?
Thanks very much

Hi

You can still make it with using a tip I gave You. A link to the wikipedia page You want to use should be set in code of this module as well and paths to new images. Please remove all other social links and leave just data-fb. This will work as a Readmore button. Last step is to change css code:

Code: Select all

.gkTeamOverlay a[data-type="fb"]:before {
    content: "Read More";
}