Jump to content



Photo

creating image hover effect on menu


  • Please log in to reply
8 replies to this topic

#1 robertobaggio2k

robertobaggio2k

    Don Corleone

  • Joined: 02-December 01
  • Location: Toronto, Canada
  • OS: Mac OSX Lion
  • Phone: iPhone 4

Posted 02 December 2012 - 16:56


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,



#2 OP robertobaggio2k

robertobaggio2k

    Don Corleone

  • Joined: 02-December 01
  • Location: Toronto, Canada
  • OS: Mac OSX Lion
  • Phone: iPhone 4

Posted 02 December 2012 - 17:58

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

#3 OP robertobaggio2k

robertobaggio2k

    Don Corleone

  • Joined: 02-December 01
  • Location: Toronto, Canada
  • OS: Mac OSX Lion
  • Phone: iPhone 4

Posted 04 December 2012 - 16:23

anyone? Willing to pay for this

#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro
  • Phone: Sony Xperia Z White

Posted 04 December 2012 - 16:31

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

#5 OP robertobaggio2k

robertobaggio2k

    Don Corleone

  • Joined: 02-December 01
  • Location: Toronto, Canada
  • OS: Mac OSX Lion
  • Phone: iPhone 4

Posted 04 December 2012 - 16:36

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


thank you!

#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro
  • Phone: Sony Xperia Z White

Posted 04 December 2012 - 17:05

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

#7 OP robertobaggio2k

robertobaggio2k

    Don Corleone

  • Joined: 02-December 01
  • Location: Toronto, Canada
  • OS: Mac OSX Lion
  • Phone: iPhone 4

Posted 04 December 2012 - 17:08

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?

#8 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro
  • Phone: Sony Xperia Z White

Posted 04 December 2012 - 17:10

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

#9 OP robertobaggio2k

robertobaggio2k

    Don Corleone

  • Joined: 02-December 01
  • Location: Toronto, Canada
  • OS: Mac OSX Lion
  • Phone: iPhone 4

Posted 04 December 2012 - 17:27

hi seahorse check pm :)



Click here to login or here to register to remove this ad, it's free!