Sign in to follow this  
Followers 0

creating image hover effect on menu

9 posts in this topic

Posted

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,

Share this post


Link to post
Share on other sites

Posted

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

sorry

Share this post


Link to post
Share on other sites

Posted

anyone? Willing to pay for this

Share this post


Link to post
Share on other sites

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

Posted

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

lemme take a look at it.

thank you!

Share this post


Link to post
Share on other sites

Posted

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;

}

It's just a quick job done trough stylish xD

Share this post


Link to post
Share on other sites

Posted

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;

}

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?

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

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.