Here is a simple way to do it, though there are many other ways:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.class1{
width: 300px; min-height: 300px;
display: inline-block; margin: 0 20px 20px 0;
position: relative;
z-index: 1;
background: #e7e7e7;
}
.class1 span {
position: absolute;
left: -9999px;
bottom: 0;
}
.class1:hover span {
z-index: 2;
display: block;
width: 260px;
left: 0;
padding: 0 20px 20px;
font-size: 1.5em;
font-style: italic;
font-family: georgia, serif;
text-shadow: 0 1px white;
}
</style>
</head>
<body>
<div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
<div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
<div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
<div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
</body>
</html>
Should work in IE7 and 8, but test it out to make sure. In IE7 you can't use display: inline-block, but for that browser you could use display: inline instead, or just float the divs instead.
In reality, I wouldn't set a height on the divs unless perhaps the images are always going to be the same size.
Originally Posted by
chuckylefrek
The client has specified they are not concerned about this site working on mobile devices.
Heh heh. To me, that's like a client saying they don't mind if their house is not built to safety standards. I just don't accept such arguments.
Reply With Quote
Bookmarks