Hover Effect - Is this the best method?

HTML & CSS
1

Hi all

I want a hover effect over an image and some text.

http://www.ttmt.org.uk/forum/1_Hover/

Is the method I have used here the best way to do this.

I remember seeing a post here about large hover effect but I couldn’t find it. I think that used <p> tags for the text and the <a> tag was positioned on top of everything - I have just surrounded everything with the <a> tags because I’m only using <img> and <span> which are both inline.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 ul{
	   list-style:none;
	 }
	 .th{
	   margin:10px;
	 }
	 img{
	   padding:10px;
	   float:left;
	   padding-right:10px;
	 }
	 a{
	   background:#aaa;
	   color:#fff;
	   display:block;
	   height:120px;
	   margin-bottom:10px;
	   text-decoration:none;
	   width:300px;
	 }
	 a:hover{
	   background:#666;
	   text-decoration:underline;
	 }
	 span{
	   display:block;
	   padding-top:10px;
	 }
	</style>
</head>

<body>
  <div class="th">
    <a href="#">
      <img src="01.jpg" />
      <span>Blah Blah Blah Blah Blah Blah</span>
    </a>
  </div>
  <div class="th">
    <a href="#">
      <img src="02.jpg" />
      <span>Blah Blah Blah Blah Blah Blah</span>
    </a>
  </div>
  

</body>
</html>
2

I would use a list but that is personal of course. Although it looks like you were thinking of that your self as well seeing the <ul> in your css. Here is how I would do it


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

#menu {
	width: 300px;
	margin: 10px 0 0 10px;
}
	 
#menu li {
	width: 300px;
	margin-bottom: 10px; 
}
	 
#menu li a {
	width:300px;
	height:120px;
	display:block;	 
	background:#aaa;
	color:#fff;
	text-decoration:none;
}

#menu li a:hover,
#menu li a:focus {
	background:#666;
	text-decoration:underline;
}

#menu li a img	{ 
	float:left;
	margin: 10px;
}

#menu li a span {
	display:block;
	padding: 10px 0;
}
</style>
</head>

<body>
<ul id="menu">
	<li>
    	<a href="#"><img src="01.jpg" /> 
        <span>Blah Blah Blah Blah Blah Blah</span>
    	</a>
	</li>
	<li>
    	<a href="#"><img src="01.jpg" /> 
        <span>Blah Blah Blah Blah Blah Blah</span>
    	</a>
	</li>
</ul>

</body>
</html>
3

I would replace this with a real CSS reset, see: http://developer.yahoo.com/yui/3/cssreset/

 *{
	   margin:0;
	   padding:0;
	 }

Donbe has a good suggestion above, I wouldn’t put that code for ALL my a tags. Classify them as a block or menu.

4

Thanks for your replies

I had used a list but I didn’t think it was right as it isn’t really a list.

I do have a fuller CSS reset.

5

Well the thing to consider is that older versions of IE do not support :hover for anything other than anchor tags , but that’s becoming a less important each passing day.

you also cant wrap anchor tags around block elements like P or DIV… the active ingredient in your code is turning the A and SPAN tags to display:block; :slight_smile:

at this point all that remains is it semantically correct? which is what I thin Donboe was trying to address.

A side note, i mentioned lack of EARLY IE support. My favored practice is to keep the CSS simple… .someclass p:hover or DIV LI:hover and use javascript to support old versions of IE

but That my personal call