Service icon hover effect

  • hi,

    is there a way to put a hover effect on the service-icons in the corporate layout?
    like this: image hover effect

    i can change the position of the service-icon image with this:

    .services-item:hover .service-icon img {
	margin-top: 20px;
}

    but it pushes the icon in front of that circle, and not behind.

Viewing 1 replies (of 1 total)

  • it could be possible,
    but not really as described in your link with the css, at least not without modifying the page-template-corporate-extensions.php first…

    take for example the social network buttons… each button has it’s own class…

    .social-profiles ul li a {
	display:block;
	width:30px;
	height:30px;
	text-indent: -99999px;
	background-image: url("images/social-icons.png");
	background-position: right bottom;
}
.social-profiles ul li.facebook a {
	background-position: 0 0;
}
.social-profiles ul li.facebook a:hover {
	background-position: 0 -40px;
}
.social-profiles ul li.twitter a {
	background-position: -40px 0;
}
.social-profiles ul li.twitter a:hover {
	background-position: -40px -40px;
}

    you will have to re-write as i said before : page-template-corporate-extensions.php the way it’s done for the social buttons in header-extensions.php…
    seems a bit complicated for a novice like me….

Viewing 1 replies (of 1 total)
  • The topic ‘Service icon hover effect’ is closed to new replies.

Tags