Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

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


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 4, 2012, 10:10 PM
americansuburbx
 
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:

http://www.americansuburbx.com

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.

Thanks!

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

http://www.interviewmagazine.com/mus...dont-be-safe#_

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."

http://bavotasan.com/2011/a-simple-fade-with-css3/
  #3  
Old Dec 5, 2012, 12:02 AM
americansuburbx
 
6 posts · Dec 2012
Actually, I added this to CSS inserts and it worked:

img
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
img:hover
{
opacity:0.6;
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?
  #4  
Old Dec 5, 2012, 12:20 AM
americansuburbx
 
6 posts · Dec 2012
Ah, I think that I got it:


a: link img
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a: hover img
{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
  #5  
Old Dec 5, 2012, 01:24 AM
Jam's Avatar
Jam
 
1,072 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
  #6  
Old Dec 5, 2012, 01:26 AM
americansuburbx
 
6 posts · Dec 2012
Thanks - appreciate it. Yes, feels good to work it out!

Bookmarks

Tags
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:23 PM.


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