Jump to content

Question

Posted

[color=#504D45][font=Arial, Helvetica, sans-serif][size=4]
Hi everyone,
A clint as asked me to recreate the following menu on her website.
www.bobetteandbelle.com
If you visit the website you will notice that the menu beside the logo has that hover effect.[/size][/font][/color][color=#504D45][font=Arial, Helvetica, sans-serif][size=4]
She wants the same thing to happen on hers, but with a different graphic ofcourse.[/size][/font][/color][color=#504D45][font=Arial, Helvetica, sans-serif][size=4]
She wants to use a template she purchased on themeforest, and i'm trying to recreate the hover effect but i'm not having any luck with the image showing...[/size][/font][/color][color=#504D45][font=Arial, Helvetica, sans-serif][size=4]
here's the website http://cccreations.umbertovalenti.com[/size][/font][/color][color=#504D45][font=Arial, Helvetica, sans-serif][size=4]
Anyone have any idea what i'm doing wrong?[/size][/font][/color][color=#504D45][font=Arial, Helvetica, sans-serif][size=4]
Thanks,[/size][/font][/color]

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted

oops the link is actually http://cccreations.uvdesigns.ca
sorry

Share this post


Link to post
Share on other sites
  • 0

Posted

anyone? Willing to pay for this

Share this post


Link to post
Share on other sites
  • 0

Posted

my bad was away from the forums for a day :p
lemme take a look at it.

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Seahorsepip' timestamp='1354638710' post='595367924']
my bad was away from the forums for a day :p
lemme take a look at it.
[/quote]

thank you!

Share this post


Link to post
Share on other sites
  • 0

Posted

Here you go:
[CODE]
ul li:hover a {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABJCAYAAAD8HkyIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEEDg5twabIQAAADBJREFUGNNjUJZX+M9w4vjx/wzK8gr/mRgYGBiIIfIKChhI04FKDCygwOGk+xwRugA5dRHdC8QW2wAAAABJRU5ErkJggg==') repeat-x !important;
padding: 28px 0 !important;
margin: -12px 15px !important;
color: #222 !important;
position: relative;
transition: none !important;
}
ul li:hover a:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAABJCAYAAAAjUDaXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEEQApvOxdiQAABKdJREFUWMPtmWtMW2UYx//n2J6G2/GE2ELpyXpYBTIWHaVsYKasiXOJt0zWGsfAcvkwICrbB0BnhyObiH5bUDL10yAZEANLCDcFNdyWsGQwLoYFFAHTy1IyC2eJpaUUP0BxGKAX2n3qPznJyXnP+/7yPO/z3p6XQICkkHNHAZwGcBxAEoDnAAjd5UQAAK8DqACglkqlUKWlIf2lDCiVShyQyxEeHr5/kELOfQug6PmEBOQV5EMaK0VDQz0mxsbB8zxcLhf2ZZFCztEA2gCoc3U6HEs/hq9qamA0GHetQ/ppTBtFUeprX1TD6XSi9IMP94QAgMBPd6krq65goL8fvT/1eFWP8KPju3J1OjidTjQ3Nnpd11fXVSQkJoLj5D5BvHbd5hgpCQsPV6ekHEHDzXqfO9VriwiSpEQi0eOwsHCYTKbggYRCISuTyYSLFgvW19cDD3K7TSgUJsbHx4ump6extrbmE4SmaZ+CIUYikRBms9lna0ovXvAJRDocDjgcDq9+ZlkWNE0DANIzMvYeR09EW8H5oiJ0dXbi95kZr0C3mptA0zR4nt85vBVyLg9AFQBOqUpFZuYJJCYl4UZd3Z6Q106dwqHkZBgNBvT29ODB1BR6e3rBsixKL17YDlLIuVoAHylVqSgqLsboyCh+7O5G7fXrHiNNxrKg6SiAZdHe1Qme50HTNCrKyhFF0/+5zg05m52NF468iKtXqmC323dtWKPV4oxWs+3b7ZZWtLa0bJXrP6vEx2Xl6O3p2QBtuuumG6L/5FJAVl2apnEoORl3h4e3QHNKVSqnv3wZ757R+DUgPYbspjXcJb0eJeeLggJxzwxvK1WpGLl3D4uLiwiWSACqzMwT6OroRDBFAog7/srLXg/EkEIKKaSQQgoppJBCeioiFHLO/sPtVkp3LgcrKytB3RKb7gwOISExMeh775GBgX688dabQQe13x8ZhSotDWKxOHig2YX5egDzNdXVuPH9dyAIIiigZwAgmmGWHprN75Akieycc/j1518CdoZNUSphNBg2MiebVn3d3NSEyfEJVH9ZA5FItGcjGq0Wt5qbtj0arXZbed/Q4Fb2hPCUZ+jv68PM9LTHs21+YSFYVgaefwyNVgOe5/FgagoVZeXILyzccJ1b1uWl7miGmX9oNqd0tLczrnUXXj15Eu/n5eGvhQVYLJZdQWKxGDT9LIwGAz6/eg0sy6KjvQMZGRkoLil+erkgjyHmhkVERhZkZWWhqbHRq3wdy7LgeR48z6O9q9OndLSLoiiSoijYbDaPPxsMhq33u8PD2/toJ0UzjAzAUYqipBKJJHLFZiOsVqtPYT52f8wzyLq8ZIpmGBNBECqSJGMVBw8K5ubmfMqw2O127zOQq6urBqPRuCqWSPyaPbwGrbtcDrvdHmWz/YO4uDj/piBv3GddXmqLiohQr646uZzcHAz0DwQe9ERgWP5+9CjngJxD8uHD+G1yMjgg6/LSH9EMI50YH097L/ssBAIB/pydDTxoE9YRzTDqO4NDnC4/DzExsV5Z5u9F1WmHw9FX+akeAoEAtXXfQMbK9t6c7Ge9Cfod3/9gwb+13GHy3fUe9l+GFMWpHHy62gAAAABJRU5ErkJggg==') !important;
position: absolute;
top: 0;
left: -26px;
}
ul li:hover a:after {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAABJCAYAAAAjUDaXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEEQMjdxTnVAAABRdJREFUWMPtmW1ME3cYwH93PVpY5oXiiuNloYwBmS8T1AQyN/ULmIiLizjjXKLOZG9xQ74tbtkGKurUD8BmZnVxghPNBBMzmZnOTVEHOBGRBcPLwd1sKWFOWF1KVtrePuHUILRI45f+vl6f/vLc/e+e//95hJQkq87/DAO3gHbgEnBC0dTfmAQEXdd1ALfbzR+aRnNzM431DTRduYLT6QQ4B+xUNPXUI4nuzUgURWRZ5oWM2axZsxZnn5OKbw7S1dkJYFM09d1JET1IQmICH27axOXGy3xbWTmS3TJFU13BisSxLjrsDgo2vI/X62XLthKMRuMi4MREMjLEREcXjfej31tbkSSJNevW8svZn60x0dFxU83ms7cHB72TKgLoVhSmTXuajMxMrre0zBME4XKMOabr9uCA/si37kGOVlVhtSaRmpaGKTLyNVEUp0/KMxqNyoMVZGTMRpKkPEEQrClJViEkot7eXqKinkCSJIMoirIoiqkhEem6zp/9/SQkJBgFQVggGgxPBiSSZTkokc/no729neTkZFNUVNRiURSfes6aHDWuqKBwY9DvhNPpJDY2VhgeHn7G5/Uu1XV91riirOxsAGRZJjExMSCRx+PB4/EAiD6fTwSmpiRZI8ZaGEJDfb0+InK5XLyx6vWAZKlpaSzJy2OfzYbJaKweHBysAq4qmqqNKrLfvKmXl5Zht9vJyc2hvLSMnNxcEhITudHWxpnTpx8qmzlrFu9t2EBHezt1dedpbroKoAJFiqZW3PdlMEebi44cPszGwo1kZGby5vr12O0OZHkKIHCtufmhov7+fk7V1jIwMMCL8+fz1jtv4+h1RPc5na/GREdPHfh78NR9X++c3Fw+372Lks1bqKmuBiB/xQqWr8i/74+PV9fcvT4aJpOJT4uLaG25ztEjRwC+UDS14K4oKzubG21tuFwuJoOSHdvvla1TNLVizHo04SInCBw7XkPJ1q00N11VFU1NDokIwGKxsMe2l5XL8wHWBVwmgsXtdvNsSgput5s+p9MnEkJ+OFnLggULAeaGVNTZ0cH8l18CiCdMmDBhwoQJEyZMmKA2/qHa5ANERkZSWXWYlcvzPSHdEqempXHpwkWA3pCKlizNo67uPEBTyEQWi4W58+aNHKC/D4lIEAS+2mdje0kJgKpoaoUIkJWdTbCtmrHYun0b1d8dG8mmCEAaaWacu3ghVKfyCgBhS/Fm/eCBA+zcvYvnp09HlmVqqmuQ5SnY7Q4OHjgw7m1KS09n4aJFzJk7B9vevSOZ3D36AxgOHaosuuO6Q2NDIyaTicIPCrBYLJhMkXQrCt2KMmbn5LPiYsxmM/X1v/K1bR99TqcKFCqauuOx9IIkWZZ5ZUkesiwHvCAMBgNZWVl8vX8/Q273niG3uxb4CXho11hqbGgAwOVyBdw5MRqNGI1GAL/BYPD7fL6/FE0dHitGLC8tC3r5xsXF0d/fr0dERNw0SNJJQRBax4sRg+3/GAwG0tPT6enp+XdoaOhHv99/q0vtGRpXNJG33hIbi8Ph8Oi6Xuf3+f4JJC5oUXx8PENDbrxer8/v97v8fn9nSERr1q3l2rUWvF5vra7rqqKpAdUzKRjJqtWrUVWNzo4OBEE4hiC0BRobcEY5i3OZMXPGyBzJBpzp6un2BRovBZrJjJkz2FJUDHBuIpOxMTNKSEygfM+XSJLEJx99jMfjOQcsm0jpuC+j0WZ85aVlkzPjeyxTS0I4h/0PsUNNvkAnLtMAAAAASUVORK5CYII=') !important;
position: absolute;
top: 0;
right: -26px;
}
[/CODE]

It's just a quick job done trough stylish xD

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Seahorsepip' timestamp='1354640755' post='595368026']
Here you go:
[CODE]
ul li:hover a {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABJCAYAAAD8HkyIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEEDg5twabIQAAADBJREFUGNNjUJZX+M9w4vjx/wzK8gr/mRgYGBiIIfIKChhI04FKDCygwOGk+xwRugA5dRHdC8QW2wAAAABJRU5ErkJggg==') repeat-x !important;
padding: 28px 0 !important;
margin: -12px 15px !important;
color: #222 !important;
position: relative;
transition: none !important;
}
ul li:hover a:before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAABJCAYAAAAjUDaXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEEQApvOxdiQAABKdJREFUWMPtmWtMW2UYx//n2J6G2/GE2ELpyXpYBTIWHaVsYKasiXOJt0zWGsfAcvkwICrbB0BnhyObiH5bUDL10yAZEANLCDcFNdyWsGQwLoYFFAHTy1IyC2eJpaUUP0BxGKAX2n3qPznJyXnP+/7yPO/z3p6XQICkkHNHAZwGcBxAEoDnAAjd5UQAAK8DqACglkqlUKWlIf2lDCiVShyQyxEeHr5/kELOfQug6PmEBOQV5EMaK0VDQz0mxsbB8zxcLhf2ZZFCztEA2gCoc3U6HEs/hq9qamA0GHetQ/ppTBtFUeprX1TD6XSi9IMP94QAgMBPd6krq65goL8fvT/1eFWP8KPju3J1OjidTjQ3Nnpd11fXVSQkJoLj5D5BvHbd5hgpCQsPV6ekHEHDzXqfO9VriwiSpEQi0eOwsHCYTKbggYRCISuTyYSLFgvW19cDD3K7TSgUJsbHx4ump6extrbmE4SmaZ+CIUYikRBms9lna0ovXvAJRDocDjgcDq9+ZlkWNE0DANIzMvYeR09EW8H5oiJ0dXbi95kZr0C3mptA0zR4nt85vBVyLg9AFQBOqUpFZuYJJCYl4UZd3Z6Q106dwqHkZBgNBvT29ODB1BR6e3rBsixKL17YDlLIuVoAHylVqSgqLsboyCh+7O5G7fXrHiNNxrKg6SiAZdHe1Qme50HTNCrKyhFF0/+5zg05m52NF468iKtXqmC323dtWKPV4oxWs+3b7ZZWtLa0bJXrP6vEx2Xl6O3p2QBtuuumG6L/5FJAVl2apnEoORl3h4e3QHNKVSqnv3wZ757R+DUgPYbspjXcJb0eJeeLggJxzwxvK1WpGLl3D4uLiwiWSACqzMwT6OroRDBFAog7/srLXg/EkEIKKaSQQgoppJBCeioiFHLO/sPtVkp3LgcrKytB3RKb7gwOISExMeh775GBgX688dabQQe13x8ZhSotDWKxOHig2YX5egDzNdXVuPH9dyAIIiigZwAgmmGWHprN75Akieycc/j1518CdoZNUSphNBg2MiebVn3d3NSEyfEJVH9ZA5FItGcjGq0Wt5qbtj0arXZbed/Q4Fb2hPCUZ+jv68PM9LTHs21+YSFYVgaefwyNVgOe5/FgagoVZeXILyzccJ1b1uWl7miGmX9oNqd0tLczrnUXXj15Eu/n5eGvhQVYLJZdQWKxGDT9LIwGAz6/eg0sy6KjvQMZGRkoLil+erkgjyHmhkVERhZkZWWhqbHRq3wdy7LgeR48z6O9q9OndLSLoiiSoijYbDaPPxsMhq33u8PD2/toJ0UzjAzAUYqipBKJJHLFZiOsVqtPYT52f8wzyLq8ZIpmGBNBECqSJGMVBw8K5ubmfMqw2O127zOQq6urBqPRuCqWSPyaPbwGrbtcDrvdHmWz/YO4uDj/piBv3GddXmqLiohQr646uZzcHAz0DwQe9ERgWP5+9CjngJxD8uHD+G1yMjgg6/LSH9EMI50YH097L/ssBAIB/pydDTxoE9YRzTDqO4NDnC4/DzExsV5Z5u9F1WmHw9FX+akeAoEAtXXfQMbK9t6c7Ge9Cfod3/9gwb+13GHy3fUe9l+GFMWpHHy62gAAAABJRU5ErkJggg==') !important;
position: absolute;
top: 0;
left: -26px;
}
ul li:hover a:after {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAABJCAYAAAAjUDaXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEEQMjdxTnVAAABRdJREFUWMPtmW1ME3cYwH93PVpY5oXiiuNloYwBmS8T1AQyN/ULmIiLizjjXKLOZG9xQ74tbtkGKurUD8BmZnVxghPNBBMzmZnOTVEHOBGRBcPLwd1sKWFOWF1KVtrePuHUILRI45f+vl6f/vLc/e+e//95hJQkq87/DAO3gHbgEnBC0dTfmAQEXdd1ALfbzR+aRnNzM431DTRduYLT6QQ4B+xUNPXUI4nuzUgURWRZ5oWM2axZsxZnn5OKbw7S1dkJYFM09d1JET1IQmICH27axOXGy3xbWTmS3TJFU13BisSxLjrsDgo2vI/X62XLthKMRuMi4MREMjLEREcXjfej31tbkSSJNevW8svZn60x0dFxU83ms7cHB72TKgLoVhSmTXuajMxMrre0zBME4XKMOabr9uCA/si37kGOVlVhtSaRmpaGKTLyNVEUp0/KMxqNyoMVZGTMRpKkPEEQrClJViEkot7eXqKinkCSJIMoirIoiqkhEem6zp/9/SQkJBgFQVggGgxPBiSSZTkokc/no729neTkZFNUVNRiURSfes6aHDWuqKBwY9DvhNPpJDY2VhgeHn7G5/Uu1XV91riirOxsAGRZJjExMSCRx+PB4/EAiD6fTwSmpiRZI8ZaGEJDfb0+InK5XLyx6vWAZKlpaSzJy2OfzYbJaKweHBysAq4qmqqNKrLfvKmXl5Zht9vJyc2hvLSMnNxcEhITudHWxpnTpx8qmzlrFu9t2EBHezt1dedpbroKoAJFiqZW3PdlMEebi44cPszGwo1kZGby5vr12O0OZHkKIHCtufmhov7+fk7V1jIwMMCL8+fz1jtv4+h1RPc5na/GREdPHfh78NR9X++c3Fw+372Lks1bqKmuBiB/xQqWr8i/74+PV9fcvT4aJpOJT4uLaG25ztEjRwC+UDS14K4oKzubG21tuFwuJoOSHdvvla1TNLVizHo04SInCBw7XkPJ1q00N11VFU1NDokIwGKxsMe2l5XL8wHWBVwmgsXtdvNsSgput5s+p9MnEkJ+OFnLggULAeaGVNTZ0cH8l18CiCdMmDBhwoQJEyZMmKA2/qHa5ANERkZSWXWYlcvzPSHdEqempXHpwkWA3pCKlizNo67uPEBTyEQWi4W58+aNHKC/D4lIEAS+2mdje0kJgKpoaoUIkJWdTbCtmrHYun0b1d8dG8mmCEAaaWacu3ghVKfyCgBhS/Fm/eCBA+zcvYvnp09HlmVqqmuQ5SnY7Q4OHjgw7m1KS09n4aJFzJk7B9vevSOZ3D36AxgOHaosuuO6Q2NDIyaTicIPCrBYLJhMkXQrCt2KMmbn5LPiYsxmM/X1v/K1bR99TqcKFCqauuOx9IIkWZZ5ZUkesiwHvCAMBgNZWVl8vX8/Q273niG3uxb4CXho11hqbGgAwOVyBdw5MRqNGI1GAL/BYPD7fL6/FE0dHitGLC8tC3r5xsXF0d/fr0dERNw0SNJJQRBax4sRg+3/GAwG0tPT6enp+XdoaOhHv99/q0vtGRpXNJG33hIbi8Ph8Oi6Xuf3+f4JJC5oUXx8PENDbrxer8/v97v8fn9nSERr1q3l2rUWvF5vra7rqqKpAdUzKRjJqtWrUVWNzo4OBEE4hiC0BRobcEY5i3OZMXPGyBzJBpzp6un2BRovBZrJjJkz2FJUDHBuIpOxMTNKSEygfM+XSJLEJx99jMfjOQcsm0jpuC+j0WZ85aVlkzPjeyxTS0I4h/0PsUNNvkAnLtMAAAAASUVORK5CYII=') !important;
position: absolute;
top: 0;
right: -26px;
}
[/CODE]

It's just a quick job done trough stylish xD
[/quote]

thank you for your quick response.
Just one question what is all that code within the url brackets?

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='robertobaggio2k' timestamp='1354640894' post='595368030']
thank you for your quick response.
Just one question what is all that code within the url brackets?
[/quote]
images, copy stuff between ' ' and paste it in your browser urlbar to see them or download them so you can host and link to them ^^

Share this post


Link to post
Share on other sites
  • 0

Posted

hi seahorse check pm :)

Share this post


Link to post
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
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.