Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] IMAGE STYLING: Hover Over Effect to All Linked Images

Old Dec 4, 2012, 10:10 PM
6 posts · Dec 2012
Is there a way to add hover over effects (opacity change on mouse over) to all linked images on the site?

This code worked for a single image:

<a href="http://www.americansuburbx.com/2012/12/keizo-kitajima-ussr-1991-2012.html"><img src="http://www.americansuburbx.com/wp-content/uploads/2012/12/BANNER-1b.jpg" style="opacity:1;filter:alpha(opacity=100)"
onmouseout="this.style.opacity=1;this.filters.alph a.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.a lpha.opacity=50" /></a>

You can see the result here - the largest image on the front page:


I want to apply this to the entire site including the front page, center post column and widgets where the images are linked.

I would have posted this to a sub-category of the forum but it wasn't clear which one it best fit in.


Old Dec 4, 2012, 10:14 PM
6 posts · Dec 2012
Also, if there is a way to "fade" the action, similar to the images at the top here:


I came across this and thought that it might apply.

"With CSS3, you can easily create a fade effect with nothing more than a little CSS."

Old Dec 5, 2012, 12:02 AM
6 posts · Dec 2012
Actually, I added this to CSS inserts and it worked:

filter:alpha(opacity=100); /* For IE8 and earlier */
filter:alpha(opacity=60); /* For IE8 and earlier */

But, I need this to apply only to images that are links - does anyone know what to change to do this?
Old Dec 5, 2012, 12:20 AM
6 posts · Dec 2012
Ah, I think that I got it:

a: link img
filter:alpha(opacity=100); /* For IE8 and earlier */
a: hover img
filter:alpha(opacity=60); /* For IE8 and earlier */
Old Dec 5, 2012, 01:24 AM
Jam's Avatar
1,112 posts · Mar 2011
Perth, Western Australia
a little over two hours and you got it nailed. Larry and Juggledad will be proud. It's great to get help to solve these issues, but it's even more rewarding when you nut it out yourself, and even better that you are prepared to share your knowledge. Thanks Doug, I'm sure plenty of people will use this code.
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites
Old Dec 5, 2012, 01:26 AM
6 posts · Dec 2012
Thanks - appreciate it. Yes, feels good to work it out!


image, mouseover, opacity, styling

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Prevent images from being hot linked theadventurebite Atahualpa 3 Wordpress theme 1 Aug 11, 2012 12:57 PM
[SOLVED] Need rollover effect for images in widgets. JaneD Sidebars & Widgets 2 Oct 22, 2010 08:46 AM
Anchor text hover effect gmatbootcamp Atahualpa 3 Wordpress theme 3 Jan 27, 2010 11:46 AM
[SOLVED] Div created by Amaniche plugin has unwanted hover effect Tim F Plugins & Atahualpa 4 Dec 6, 2009 03:16 AM
[SOLVED] problem with hover effect in anchor link destination hiccupgirl Atahualpa 3 Wordpress theme 1 Oct 16, 2009 06:25 PM

All times are GMT -6. The time now is 10:42 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.