I am working on a site design that consists of a grid of 6 divs (2 rows of 3)
Each div has an image filling the entire div plus some live text. The image and text needs to be dynamic as it changes regularly via cms updates. This also applies to the rollover content.
I want to implement a rollover on each div so that different content is displayed when the mouse rolls over each div and it reverts back to the original when mouse leaves div.
Sounds quite straightforward but I am struggling to find a solution
I tried with JavaScript and setting to display none and display block but this resulted in a flickering loop. Using visibility didn’t work either.
Ideally the solution will work in ie7 but ie8 would probably be acceptable to client as a minimum.
You can do this with CSS alone, but it can cause accessibility problems, as hovering doesn’t work on mobile devices. So firstly plan out how this will play out on various devices:
devices that don’t have hover will need another way to access the text. Either it should be visible all the time, or available with a click (but how is someone going to know to click?)
if you use JavaScript, how will the content be available if JS is turned off?
will users on assistive devices like screen readers be able to access the content?
If all these issues provide too many challenges, it probably means that the idea is not a good one in the first place.
A rough guess of mine would be for you to have .class1 (the original content) and .class1:hover (the replacing content), giving .class1 a z-index of 1 and .class1:hover a z-index of 2.
I’ve been trying this, but I can’t quite get it. Here’s the non-working code I have so far:
Thanks for the swift reply Ralph. The client has specified they are not concerned about this site working on mobile devices. Would the pure CSS solution work on IE7/IE8?
Would the CSS solution involve using hover? If so, woulld you give me an example please. I did try this by laying out the 2 separate divs inside a container div for each of the 6 grid positions and setting the value of top to minus the height of the div but whilst it did move up the content of the 2 nested divs, both were visible.
Here is a simple way to do it, though there are many other ways:
<!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.
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.
Thank you so much Ralph. I will give this a go now. Haha yes I agree to the clients decision about mobiles is ludicrous considering they are so concerned about it working for IE7. They had initially asked for it to be done in Flash but I told them I was able to do it in html - haha welll I thought I was able to do it:)
You have to be careful how you hide content, because what’s been set up here is for those who can see the screen. What about those who can’t? They need to know what’s there too, and if you initially have the content set to display: none (and possibly visibility: hidden, though I’m not sure), people using assistive technologies like screen readers may have no idea the extra content is there. And they can’t hover etc. So it’s at least partly an accessibility issue. Styling (or functionality provided by JS etc.) should never mean that content is not accessible to certain users.
Having content moved off screen doesn’t stop it from being accessed in screen readers. However, if someone is navigating via a keyboard and not a mouse, they will be ‘up the creek without a paddle’, so to speak … as will mobile users. That’s why I sounded cautions at the top of this thread.
Having content moved off screen doesn’t stop it from being accessed in screen readers. However, if someone is navigating via a keyboard and not a mouse, they will be ‘up the creek without a paddle’, so to speak … as will mobile users. That’s why I sounded cautions at the top of this thread.
I edited my example so that :hover can hide the top image using all 3 methods: z-index, visibility, and position… just pick one :). I have not considered accessibility with keyboard only or mobile devices since they don’t recognize :hover. I have a feeling the web is full of “accessibility” resources. Can you recommend a favorite for a beginner?
Indeed, there are some great sites out there, and there’s an Accessibility forum here, too. You might even be lucky enough to meet the forum cat, @Stomme_poes, who is very knowledgeable on such things, unlike myself. It’s a fascinating subject. I don’t have a list of links handy at the moment, but here’s one:
If you do a bit of Googling you find lots, though.
Is the rollover image going to be a different image or just a highlighted version of the original image? If it’s just an effect using an image of the same size then it would be better in the background rather than in an html element and would keep the code tidier. If it’s a new image that is important to the content then having it in the html is fine. Of course you may be tied to a cms inserting both into the html so may have little choice in cleaning things up.
Ronpat’s code above is tidier as it removes all the redundant classes and tidies up the html. If as I mentioned the rollover is just for effect then I would put the second image in the background of the main div instead.
You can start at the source and find plenty of appropriate links from there:
