creating image hover effect on menu

[robertobaggio2k]

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.

She wants the same thing to happen on hers, but with a different graphic ofcourse.

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...

here's the website http://cccreations.umbertovalenti.com

Anyone have any idea what i'm doing wrong?

Thanks,

[robertobaggio2k]

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

sorry

[robertobaggio2k]

anyone? Willing to pay for this

[Seahorsepip Veteran]

my bad was away from the forums for a day :p

lemme take a look at it.

[robertobaggio2k]

my bad was away from the forums for a day :p

lemme take a look at it.

thank you!

[Seahorsepip Veteran]

Here you go:

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

[robertobaggio2k]

Here you go:

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

thank you for your quick response.

Just one question what is all that code within the url brackets?

[Seahorsepip Veteran]

thank you for your quick response.

Just one question what is all that code within the url brackets?

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 ^^

[robertobaggio2k]

hi seahorse check pm :)