REDSTAR PROJECT: Hidden/Revealing text

I spent a few hours during this week’s lesson-time trying to work out a way of having text appear over the top of each product image when the mouse is hovered over it – the text would contain some context regarding the name of the product.

At first I imagined that this would be achieved using some kind of overlay.  However, I found a way of achieving this by placing the text and the images into separate containing divs (well, <section> tags as I’m trying to discipline myself to start coding in html5 – though I can’t say I completely understand the usage yet, for example when to use section vs article etc).  Once the text and images are in separate containers, I set the text container to display:none; and the image to display:block.  Then, these are switched when the image is hovered over by setting a hover state to the overall containing div.

I took inspiration from this fantastic tutorial online:  There are numerous things in this article that I plan to get my teeth in too some time soon (rendering SVG’s directly into the browser for one!)  For now though, I was really pleased to learn something new which is actually a very simple thing but something that opens up a world of potential – that in css you can add a div / class after a :hover state has been assigned to a div/class (i.e. change state of div/class x when div/class y is hovered over e.g.  #div_y:hover #div_x) – this is what I used to achieve the hover ‘reveal text’ function.  The result of my practice code can be seen at

The full code for this practice session is:

<!DOCTYPE html>
<style type="text/css">
#box {
 border:1px solid #999;
.text {
.image {
#box:hover .image {
#box:hover .text {
<section id = "box">
<article class = "text">
 <h1> Cameron's Sanction Bustin' </h1>
 <h2> Jolly Jelly </h2>
<article class = "image">
 <img src = "images/cameron_jelly.png"/>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s