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: http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/  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 http://www.onebigegg.com/college/text_reveal.html

The full code for this practice session is:

<!DOCTYPE html>
<head>
<style type="text/css">
#box {
 width:242px;
 height:326px;
 border:1px solid #999;
}
.text {
 display:none; 
}
.image {
 display:block;
}
#box:hover .image {
 display:none;
}
#box:hover .text {
 display:block;
}
</style>
</head>
<body>
<section id = "box">
<article class = "text">
 <h1> Cameron's Sanction Bustin' </h1>
 <h2> Jolly Jelly </h2>
 </article>
<article class = "image">
 <img src = "images/cameron_jelly.png"/>
 </article>
</section>
</body>
</html>
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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