Image change on hover

HTML & CSS
1

Hi there!

Simple CSS question that I’m having a little trouble with.

Here’s the site:

http://www.tadpolemarketing.ca

I want the 4 big icons at the bottom to change to a green color when a user hovers over them. It’s also important that they
‘fade’ to green as oppose to just switching. I’m also using Wordpress, if that makes any difference.

Should I/Can I use Sprites? Or just a basic hover function?

Here is an example of the html that I’m using for one of the icons in the footer widgets section:

<!-- START #footer -->
	<footer id="footer" >
				<!-- START .footer-widgets -->
		<div class="footer-widgets container_12 group">
								<ul class="grid_3">
					<li id="text-4" class="widget widget_text"><h4 class="widgettitle">OPTIMIZE</h4>			<div class="textwidget"><p><img src="http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/optimize-widget.png"><br />
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
		</li>				</ul>

And the relevant CSS (I think?):

#footer a:hover img, #footer img:hover { border: none; }

Sorry if I’m missing info. Thanks

2

Well you are off on your structure.

For starers, you can’t change an IMG on hover per sé, as IMGs are content.
So that being said you can use ANY APPROPRIATE method to change the BG image of any element. I’d suggest …since I assume you are tied down to the code you provided by your CMS and can actually optimize it, that you put the image as the BG of the H3

assuming all your widget images are 230x190px you can make a grid and join them unto one singe HORIZONTAL sprite (1840px x190px), the first 4(920px) will the image in the off state, the rest IN THE SAME ORDER, but in the HOVER state.

.footer-widgets h4 { padding-bottom:190px, width:230px; background:url(sprite.gif) no-repeat 0 bottom;}
#text-1  h4{background-position:0  bottom }
#text-2  h4{background-position: 230px bottom}
#text-2  h4{background-position: 460px bottom}
#text-2  h4{background-position: 690px bottom}
#text-1 :hover h4{background-position:920px  bottom }
#text-2 :hover  h4{background-position: 1150px bottom}
#text-2 :hover  h4{background-position: 1380px bottom}
#text-2 :hover  h4{background-position: 1610px bottom}

your markup will be more like this (not the image is no longer content)

		<div class="footer-widgets container_12 group">
					<ul class="grid_3">
					<li id="text-1" class="widget widget_text">
						<h4 class="widgettitle">OPTIMIZE</h4>
						<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					</li>				
		</ul>
</div>

and that should do it.

Hope that helps

3

Sorry, I’m not sure where I’ve gone wrong but something ain’t right.

Here’s my sprite image: http://www.tadpolemarketing.ca/wp-content/uploads/2011/10/sprite.png

Added this to the CSS:

.footer-widgets h4 { padding-bottom:190px, width:230px; background:url(/wp-content/uploads/2011/10/sprite.png) no-repeat 0 bottom;}
#text-1  h4{background-position:0  bottom }
#text-2  h4{background-position: 230px bottom}
#text-2  h4{background-position: 460px bottom}
#text-2  h4{background-position: 690px bottom}
#text-1 :hover h4{background-position:920px  bottom }
#text-2 :hover  h4{background-position: 1150px bottom}
#text-2 :hover  h4{background-position: 1380px bottom}
#text-2 :hover  h4{background-position: 1610px bottom}

I guess my issue is with the HTML. I’m not sure really what I should be changing. Here’s what I have to work with in the footer.php:

</div>
	<!-- END #content -->
	</div>
	<!-- END #wrapper -->
	
	<?php 
		$footer_widgets_disabled = of_footer_widgets_disabled(); 
		$number_of_widgets = of_number_of_footer_widgets();
		
		if($number_of_widgets === 2) {
			$grid_class = "grid_6";
		} 
		else if($number_of_widgets === 3) {
			$grid_class = "grid_4";
		}
		else {
			$grid_class = "grid_3";
		}
	?>
	
	<!-- START #footer -->
	<footer id="footer" <?php if($footer_widgets_disabled) { echo 'class="no-widgets"'; } ?>>
		<?php if(!$footer_widgets_disabled) { ?>
		<!-- START .footer-widgets -->
		<div class="footer-widgets container_12 group">
<?php for($i = 1; $i <= $number_of_widgets; $i++) { ?>
				<ul class="<?php echo $grid_class; ?>">
					<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('bottom-' . $i) ) : ?>
				
		          	<li><h4><?php _e('Widgetized Area', 'echo'); echo ' ' + $i; ?></h4></li>
		          	<li>
		          		<p><?php _e('Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called ', 'echo'); ?> 
		          		<strong><?php _e('Bottom', 'echo'); echo ' ' . $i; ?></strong>.
		          		</p>
		          	</li>
		          	<?php endif; ?>
				</ul>
				<?php } ?>
		</div>
		<!-- END .footer-widgets -->
		<?php } ?>
		
		<div id="copyright">
			<div class="container_12 group">
				<div class="grid_12">
					<p class="grid_4 alpha"><small><?php echo of_copyright_text(); ?></small></p>
				
					<ul class="grid_8 omega" id="social-networking">
				      <?php of_social_networks(); ?>
					</ul>
				</div>
			</div>
		</div>
	</footer>
	<!-- END #footer -->

<!-- START wp_footer -->
<?php wp_footer(); ?>
<!-- END wp_footer -->
</body>
</html>

I’m using Wordpress, so right now I just drag and drop the html widgets through the dashboard and it automatically populates… So, yeah. I’m kind of lost.

Thanks so much for your help

4

Hi,

You have typos in your css and the values should be negative.

e.g: use this code:


.footer-widgets h4 { padding-bottom:190px; width:230px; background:url(/wp-content/uploads/2011/10/sprite.png) no-repeat 0 bottom;}

#text-1  h4{background-position:0  bottom }
#text-2  h4{background-position: -230px bottom}
#text-3 h4{background-position: -460px bottom}
#text-4 h4{background-position: -690px bottom}
#text-1 h4:hover{background-position:-920px  bottom }
#text-2 h4:hover {background-position: -1150px bottom}
#text-3 h4:hover {background-position: -1380px bottom}
#text-4 h4:hover {background-position: -1610px bottom}

You haven’t added the ids either to the html so they are not being targeted. The html needs to look like this:


<div class="footer-widgets container_12 group">
		<ul class="grid_3">
				<li class="widget widget_text" [B]id="text-1">[/B]
						<h4 class="widgettitle">test</h4>
						<div class="textwidget">
								<p>test text</p>
						</div>
				</li>
		</ul>
		<ul class="grid_3">
				[B]<li id="text-2">[/B]
						<h4>Widgetized Area2</h4>
				</li>
				<li>
						<p>Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called <strong>Bottom 2</strong>. </p>
				</li>
		</ul>
		<ul class="grid_3">
			[B]	<li id="text-3">[/B]
						<h4>Widgetized Area3</h4>
				</li>
				<li>
						<p>Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called <strong>Bottom 3</strong>. </p>
				</li>
		</ul>
		<ul class="grid_3">
				[B]<li id="text-4">[/B]
						<h4>Widgetized Area4</h4>
				</li>
				<li>
						<p>Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called <strong>Bottom 4</strong>. </p>
				</li>
		</ul>
</div>

You can’t really do a fade effect on a background image with css alone. You could use CSS3 transitions but you would need to start with a reduced opacity and then make it fully opaque on hover.

e.g.



.footer-widgets h4{
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
opacity:0.4;
}
.footer-widgets h4:hover{opacity:1.0}
5

oops, the missing negative was my bad ( that’s what I get for coding directly on the QR window).

It’s next to impossible to analyze a widgets output w/o the widgets source code.

HOWEVER i would appear to me that your H4 and your content are ending up as different LIs, delete the RED text, add the GREEN text:

                      <li [COLOR="#008000"]<? echo "id='text-$i'";?>[/COLOR]><h4><?php _e('Widgetized Area', 'echo'); echo ' ' + $i; ?></h4>[COLOR="#FF0000"]</li>
                      <li>[/COLOR]
                          <p><?php _e('Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called ', 'echo'); ?> 
                          <strong><?php _e('Bottom', 'echo'); echo ' ' . $i; ?></strong>.
                          </p>
                      </li>

RUN this, then VIEW SOURCE. Look for the sequence of “id=‘text-??’” it could begin with 0/1 but it should be sequential, that’s what you need to name the IDs in your CSS.

6

Thanks so much to both of you. I’ll be having an ‘intense’ coding sesh this evening and hopefully I can sort it out!

Thanks again

7

Ok, I made the changes to the CSS, and then removed/added the code Dresden mentioned- and still doesn’t work…

Here’s the code that the source spits out:

<div class="footer-widgets container_12 group">

				<ul class="grid_3">

					<li id="text-3" class="widget widget_text"><h4 class="widgettitle">test</h4>			<div class="textwidget"></div>
		</li>				</ul>

								<ul class="grid_3">

									

		          	<li id='text-2'><h4>Widgetized Area2</h4>

		          

		          		<p>Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called  

		          		<strong>Bottom 2</strong>.

		          		</p>

		          	</li>

		          					</ul>

								<ul class="grid_3">

									

		          	<li id='text-3'><h4>Widgetized Area3</h4>

		          

		          		<p>Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called  

		          		<strong>Bottom 3</strong>.

		          		</p>

		          	</li>

		          					</ul>

								<ul class="grid_3">

									

		          	<li id='text-4'><h4>Widgetized Area4</h4>

		          

		          		<p>Go to Appearance - Widgets section to overwrite these sections. Use any widgets that fits you best. This is called  

		          		<strong>Bottom 4</strong>.

		          		</p>

		          	</li>

		          					</ul>

						</div>

		

		<!-- END .footer-widgets -->

So it goes text-3, text-2, text-3, text-4.

The other thing that I was going to suggest… I don’t really have to do this through the widgets output at all, since I can just edit the footer code directly. So if you guys have any recommendations of exactly how it should appear as an output in the footer, I can just use that.

(e.g. see what the output source code is for the original layout of the 4 widget boxes, then tweak the output code to do what I need it to, then copy paste that directly into the footer, removing any PHP)

Bah, sorry- I’m in way over my head… I kind of know how to ‘read’ this stuff (like how I can ‘read’ french), but not write it at all.

Thanks

my updated CSS:

#footer a:hover img, #footer img:hover { border: none; }

.footer-widgets h4 { padding-bottom:190px, width:230px; background:url(/wp-content/uploads/2011/10/sprite.png) no-repeat 0 bottom;}
#text-1  h4{background-position:0  bottom }
#text-2  h4{background-position: 230px bottom}
#text-2  h4{background-position: 460px bottom}
#text-2  h4{background-position: 690px bottom}
#text-1 :hover h4{background-position:920px  bottom }
#text-2 :hover  h4{background-position: 1150px bottom}
#text-2 :hover  h4{background-position: 1380px bottom}
#text-2 :hover  h4{background-position: 1610px bottom}

.footer-widgets h4{
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
opacity:0.4;
}
.footer-widgets h4:hover{opacity:1.0}
8

The code I gave you was a working example and fully functional. You just had to copy the css and then add the ids where I stated. No other changes were necessary.

You have failed to copy my CSS code properly and have left in place all the typos and incorrect rules.


.footer-widgets h4 { padding-bottom:190px,

That final comma will cause the rule to be broken. it should be a semi-colon ;


#text-1  h4{background-position:0  bottom }
[B]#text-2[/B]  h4{background-position: 230px bottom}
[B]#text-2[/B]  h4{background-position: 460px bottom}
[B]#text-2[/B]  h4{background-position: 690px bottom}

That should be #text-1, #text-2, #text-3 #text-4 ,. You have defined #text2 over and over again.

You also missed the negative horizontal co-ordinates (e.g. -920px bottom).

The mistake is duplicated here for both the above points.


#text-1 :hover h4{background-position:920px  bottom }
#text-2 :hover  h4{background-position: 1150px bottom}
#text-2 :hover  h4{background-position: 1380px bottom}
#text-2 :hover  h4{background-position: 1610px bottom}

You also have the hover in the wrong place.

it should be:


#text-1[B] h4:hover [/B]{background-position:-920px  bottom }

All those were corrected in the code I gave you and all you need do is copy and paste and remove your existing rules.

Here is the code again in working order and testing working live on your site with css terminal.


.footer-widgets h4 { padding-bottom:190px; width:230px; background:url(/wp-content/uploads/2011/10/sprite.png) no-repeat 0 bottom;}



#text-1  h4{background-position:0  bottom }
#text-2  h4{background-position: -230px bottom}
#text-3 h4{background-position: -460px bottom}
#text-4 h4{background-position: -690px bottom}
#text-1 h4:hover{background-position:-920px  bottom }
#text-2 h4:hover {background-position: -1150px bottom}
#text-3 h4:hover {background-position: -1380px bottom}
#text-4 h4:hover {background-position: -1610px bottom}

.footer-widgets h4{
-webkit-transition: opacity 2s ease-in-out;
	-moz-transition: opacity 2s ease-in-out;
	-o-transition: opacity 2s ease-in-out;
	-ms-transition: opacity 2s ease-in-out;
	transition: opacity 2s ease-in-out;
opacity:0.4;
}

.footer-widgets h4:hover{opacity:1.0}
9

Wow… How the hell did I screw it up so much. I feel like a total derpy.

Thanks so much. I’m taking CSS for Designers on Lynda.com right now to hopefully get some kind of a smidgeon of a grasp of what’s going on.

10

No worries - it’s always hard when you aren’t really familiar with the code :slight_smile: