News

Use HTML and CSS to create a scaling hover effect

Add some simple, subtle and engaging hover effects to add interest and direction to an image.

fancy01

inspiration www.fancyfeast.com

The hotly-tipped new word for the 2015 edition of the Oxford English Dictionary is ‘showrooming’; the practice of examining merchandise in a traditional retail store without purchasing, but then shopping online for the same item.

Online retailers would probably rather we didn’t feel the need to go out and touch the things we want to buy, but the cold, hard surface of a computer monitor or smartphone screen can act as a barrier to the buying experience ­– and that’s why online interaction is so important. While we may not be able to touch it, we can present the product in in a way that is fun and interactive – we can move people.

Set some styles

ROXXAN wasn’t tempted to add a cat’s paw background, but the workshop layout is a little sparser, so paws it is. With no other text on the page, the body attribute has been co-opted to display caption text.

001 html { 
002 background: url(paw.png) repeat; 
003 }
004 body {
005 color: #eee;
006 font-family: sans-serif; 
007 font-size: 20px;
008 font-weight: 800;
009 line-height: 1.75;
010 text-align: center;
011 }

Centre in browser

Centring content should be a straightforward task, but the longer you look into the subject, the more you’ll end up being reminded of Jack Nicholson in A Few Good Men – ‘You want centred content? You can’t handle centred content!’. Anyway, it’s just about handled here in the following snippet.

001 #container {   
002 margin-top:200px;
003 float:right;
004 position:relative;
005 left:-50%;
006 }
007 #inside {
008 position:relative;
009 left:50%;
010 }

Create your scalable <div>

The natural state of this <div> is its non-hovered state, and the transition value used here determines how long it takes to return to this state after it has been transformed in some way. 0.3s is snappy, but not jarring like 0.0s would be.

001 div.scales {
002 width:400px;
003 height:272px;
004 float:left;
005 transition: 0.3s ease-out;
006 padding: 0px 10px 50px 10px;
007 }

Set the hover state

Here is the important line that specifies the exact transformation that is required. The whole <div> – and any images or text that are contained within it – is to be scaled down to 90 per cent of its original size in both the X and Y dimensions.

001 div.scaleOn {
002 transform: scale(0.9,0.9);
003 transition: 0.3s ease-out;
004 }

Create the HTML

The onmouseout and onmouseover events are used to execute JavaScript at the strategic points that their names would suggest. In this case, the <div> already has the class (scales) and is having the value of scaleOn added to it when the onmouseover event occurs.

001 <div id=”container”>
002 <div id=”inside”>
003 <div class=”scales” onmouseout=”this.className=’scales’”
004 onmouseover=”this.className=’scales  scaleOn’”>
005 <img src=”2todinner.jpg”>TWO HOURS   UNTIL DINNER
006 </div>
×