Jump to content

Simple CSS Menu fish eye effect


ScriptShow

Recommended Posts

Simple Menu Text Links eye fish effect. Pure CSS, without JavaScript.

<!DOCTYPE html>

<html>
<head>
<title>Simple Menu</title>
<style type="text/css">
body { font: normal normal 100% Helvetica, sans-serif; }
li { font-size: 1em; transition: all 0.2s; }
li:hover { font-size: 2em; }
li:hover + li { font-size: 1.6em; }
li:hover + li + li { font-size: 1.3em; }
</style>
</head>
<body>
<h1>Simple Menu</h1>
<ul>
<li><a href="#">Texto del Link primero ...</a></li>
<li><a href="#">Texto del Link segundo ...</a></li>
<li><a href="#">Texto del Link tercero ...</a></li>
<li><a href="#">Texto del Link cuarto ...</a></li>
<li><a href="#">Texto del Link quinto ...</a></li>
<li><a href="#">Texto del Link sexto ...</a></li>
<li><a href="#">Texto del Link séptimo ...</a></li>
<li><a href="#">Texto del Link octavo ...</a></li>
</ul>
<p>Scriptshow <a href="#">Web</a> Experiments</p>
</body>
</html>

Un Saludo.

Edited by ScriptShow
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...