Jump to content


Photo

Social Icons Transition


Best Answer flipstar , 13 May 2013 - 07:21 AM

it worked. thanks again for your qick support rob. 

 

for everybody who's searching here the code: 

 

 

functions.php

 
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>
	</div>
<?php }

style.css

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

.social_icons a{
	width:24px;
	height:24px;
	display:inline-block;
	text-indent:-9999em;
	background-position:0 0;
	background-size:contain;
	background-repeat:no-repeat;
	z-index:2000;
	overflow:hidden;
}

.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!

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
4 replies to this topic

#1 flipstar

flipstar

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 12 May 2013 - 07:43 PM

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: 

http://www.indepaskamer.nl

 

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. 

 

cheers

flipstar


Edited by flipstar, 12 May 2013 - 07:45 PM.


#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 12 May 2013 - 07:48 PM

Hello Flipstar,

 

The solution you're looking for is a hook with some custom CSS.

 

Please see this topic I answered earlier today: http://www.pagelines...andnav-section/

 

Let me know if this solution would work for you.



#3 flipstar

flipstar

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 12 May 2013 - 08:47 PM

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? 



#4 flipstar

flipstar

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 12 May 2013 - 09:31 PM

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



#5 flipstar

flipstar

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 13 May 2013 - 07:21 AM   Best Answer

it worked. thanks again for your qick support rob. 

 

for everybody who's searching here the code: 

 

 

functions.php

 
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>
	</div>
<?php }

style.css

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

.social_icons a{
	width:24px;
	height:24px;
	display:inline-block;
	text-indent:-9999em;
	background-position:0 0;
	background-size:contain;
	background-repeat:no-repeat;
	z-index:2000;
	overflow:hidden;
}

.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!