Expanding hovered items
Get movement into your site by expanding images as you hover over them.
Expanding hovered items
This is a nice way of highlighting the menu items a user is hovering over. It expands the current (potential) selection and reduces the sizes of the other items. It is all done with CSS and HTML.
First, let's set up the HTML:
<div id= "title"><h1>Projects Home</h1></div>
<div id= "nav">
<ul>
<li><a href="">Project 1</a></li>
<li><a href="">Project 2</a></li>
<li><a href="">Project 3</a></li>
</ul>
</div>
This is simply a title with 3 menu items in an unsorted list.
And the CSS? Not much more to it.
ul{margin: 4% auto;
padding:0;
width: 100%;
list-style-type: none;
overflow: auto;}
li{box-sizing: border-box;
text-align: center;
display: inline-block;
float:left;
width: 33.33%; //3 menu items so I'm splitting the page with into 3
padding: 2% 0;
margin: 0%;
ul:hover > li:hover{width: 37.33%;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;}
ul:hover > li{width: 31.33%;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;}
Above is the CSS required to get it working but without particularly beautifying the page layout. The JSFiddle link has a little more formatting in place - it is pretty ugly but that is to highlight how the it works.
Take a look at this JSFiddle for a working example.
Example Work
Here is a random example of some of our work.
