Sign in to follow this  
Followers 0

Social Icons Transition

5 posts in this topic

hey all,


i'm trying to get a transition/rollover effect on the social icons in the branding section but can't figure out how to do. 


first, here is a link to a site with the effect i try to imitate:


i created a child theme and worked on the style.css there. i tried a lot but i cant get one single effect to work. hopefully someone here can help me out with this. 


i changed the icons png of course and the icons, like in the example, got two different styles. i want to hide the lower part and fade it in on mouseover.


my code: 

	/* @ Header Icons */
			.icons {text-align: right;position: absolute;bottom: 50%; right:0px;line-height: 20px;height: 24px;}
			.icons a {
				display: block;
				width: 24px; 
				height: 24px; 
				margin-left: 8px; 
				float: right; 
				text-align: right; 
				opacity: 0,5; 
				transition: background-position 0.25s ease 0s;
				background-position: 0px;
				overflow: hidden;
				-webkit-transition: background-position 0,3s ease;
.icons a:hover {
    background-position: -24px;



there are some nice transitions out there and, like i said, i tried some stuff but none did work. 




Edited by flipstar

Share this post

Link to post
Share on other sites

hey rob, 


thank you so much for your turbo answer. thats great. 



unfortunately i'm not able to use your code to solve my problem because of my lack of knowledge. 


i did try to modify the functions.php part but i don't understand exactly what i'm doing :) .. if i get it right i want to make a new class called "social-media-icon" and then id's for every social media icon (facebook, twitter...)?


after that i have to modify the style.css and define the transition and stuff?


is this the way to do it? 

Share this post

Link to post
Share on other sites

i cant edit my previous post but i think i got it now. i keep trying and tell you if it works. thanks so far

Share this post

Link to post
Share on other sites

it worked. thanks again for your qick support rob. 


for everybody who's searching here the code: 




add_action('pagelines_branding_icons_start', 'mynewicons');
function mynewicons(){
<div class="social_icons">
		<a href="URL" class="twitter" target="_blank" title=""></a>
		<a href="URL" class="vimeo" target="_blank" title=""></a>
		<a href="URL" class="facebook" target="_blank" title=""></a>
		<a href="URL" class="rss" target="_blank" title=""></a>
		<a href="URL" class="youtube" target="_blank" title=""></a>
<?php }


.social_icons {text-align: right;position: 30px;bottom: 50%; right:0px;line-height: 20px;height: 24px;}

.social_icons a{
	background-position:0 0;

.twitter{ background:url('http://THEME URL/sections/branding/twitter.png'); }
.facebook{ background:url('THEME URL/sections/branding/facebook2.png'); }
.rss{ background:url('THEME URLsections/branding/rss.png'); }
.youtube{ background:url('THEME URLsections/branding/youtube.png'); }
.vimeo{ background:url('http://THEME URL/sections/branding/vimeo.png'); }

.social_icons a:hover{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
	transition: transform 0.2s ease-out;
	-webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;

this will make the buttons rotate by hover but you cann add any transition with this.


so this is solved!

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