Contact person Images

Hi, I'm from Germany. Sorry for my bad english.
I need help. I use anywhere only your themes and love you. On my website we have a page where the contact person can be shown with an image. ( http://hilke-heizoel.de/kontakt/ansprechpartner/ )!
So i don't like that design.

In another theme I have seen something: http://kunde.sascha-hilke.de/our-team/

How can I arrange the images as and when you go over it, that the images are in color?

Thank you so much

 

Hello Saschahilke,

To arrange images in a linear order you can use "three column" shortcode (http://inkthemes.com/wptheme/woodpecker-theme/shortcodes/).
Please check format given below.

Code:

 [col3]<h4>YOUR HEADING</h4> 
<a href="IMAGE LINK ADDRESS"><img class="image-effect" src="YOUR IMAGE SOURCE"></a>[/col3][col3] <h4>YOUR HEADING</h4> 
<a href="IMAGE LINK ADDRESS"><img class="image-effect" src="YOUR IMAGE SOURCE"></a>[/col3][col3_last]<h4>YOUR HEADING</h4> 
<a href="IMAGE LINK ADDRESS"><img class="image-effect" src="YOUR IMAGE SOURCE"></a>[/col3_last]

Add heading, link and image address in place of capital text and paste whole code in the page editor of page "our-team". Don't change image class i.e "image-effect".

After this
Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

img.image-effect {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
}
img.image-effect:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

Thanks & Regards
Nitesh Raghuwanshi

 

It works! Thank you so much!

Have a nice day!