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


  • Please log in to reply
4 replies to this topic

#1 flipstar

flipstar

    Newbie

  • Members
  • Pip
  • 7 posts
  • Country: Country Flag

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
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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
  • Country: Country Flag

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
  • Country: Country Flag

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
  • Country: Country Flag

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!