This topic is now archived and is closed to further replies.

  • 0

Social Icons Transition


Posted · Report post

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. 




Share this post

Link to post
Share on other sites

4 answers to this question

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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