Exactly how are you wanting to add them? You can do something like this with a few simple shortcodes and html.
Yes that is the type of thing I am looking to do! Is it relatively easy to research online how to do that?
The way I did it is using a little HTML, custom CSS and a shortcode plugin.
First, Download and install this plugin
Then to make the images on your main page, go to:
Appearance > Widgets
and in the “front page widgets area” drag the “shortcodes Ultimate” widget over. Leave the Title blank and use this code:
[su_row class=""][su_column size="1/3"]
<center>[su_frame align="left" class="fade"]a href="URL TO TARGET PAGE"><img src="URL TO IMAGE LOCATION">[/su_frame]
[/su_column]
[su_column size="1/3"]
<center>[su_frame align="left" class="fade"]<a href="URL TO TARGET PAGE"><img src="URL TO IMAGE LOCATION"></a>[/su_frame]
[/su_column]
[su_column size="1/3"]
<center>[su_frame align="left" class="fade"]<a href="http://sumterwire.com/coming-soon">a href="URL TO TARGET PAGE"><img src="URL TO IMAGE LOCATION"></a>[/su_frame]
[/su_column][/su_row]
change how many columns by change the “1/3” by replacing the 3 with number of columns you want.
You can also use the Shortcodes cheat sheet by clicking on
Shortcodes Ultimate > Cheatsheet in your left wp menu on the left.
If you want the images as links to fade when the mouse is over it, go to:
Appearance > Customize > Theme Options > Advanced
and put in this custom CSS:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
LMK if this helps.
