TEFc Floating picto CSS

<div class="transition" style="position:relative;margin-bottom:-150px;"><a href="LINKTOYOURPICTOGRAM" target="_blank"><img src="PICTOLINK1" style="width:150px;height:150px;" class="float"><img src="PICTOLINK2" style="width:150px;height:150px;" class="float"></a></div>


<div style="display:none;">

**Do not delete the div that this is in! Will probably mess with your code and the text will show. You can still delete this text if you want.
You need to make your own images for the pictogram. The first link is the picto that you first see. Second link is what you see when you hover over it.
I just take a screenshot of the pictogram page, open it in SAI or another art program, make it transparent and add some effects to it and then put it on an image hosting site.
To apply the different effects to your picto just change the class. Right now there are 2; float and pulse.

To position your pictogram, refer to the style tag in the above div. Adding "left:0px;top:0px;" will change it.
Left: change left to a -negative number. (left:-10px;)
Right: change left to a positive number. (left:30px;)
Up: change top to a -negative number. (top:-10px;)
Down: change top to a positive number. (top:40px;)

<style>.transition{position:relative;width:150px;height:150px;} .transition img{position:absolute;top:0;left:0} .transition img:first-child{opacity:1; transition:all 1s} .transition img:last-child{opacity:0; transition: all 1s} .transition:hover img:first-child{opacity:0} .transition:hover img:last-child{opacity:1}</style>

** Width and height for the "transition" coding are how big you want the pictogram to be.
You can change how long the transition lasts - it is set to 1 second here. Anything past 3 seconds might look a little wonky.

**** KEYFRAMES. This is what makes the pictogram move.
0% is the beginning of the animation, 50% is halfway, and then 100% is the ending. Only change the 50%. It should automatically loop by itself. You can change how long the animation lasts, too.

--- FLOATING PICTOGRAM ---
This makes your picto move up and down slightly.

<style>@keyframes float {0% {transform: translatey(0px);}50% {transform: translatey(-20px);}100% {transform: translatey(0px);}}</style>
<style>.float{animation: float 10s ease-in-out infinite;}</style>

--- HEARTBEAT PICTOGRAM---
This makes your pictogram pulse in an out, kind of like a heartbeat. Looks a bit different from the floating picto code because I yoinked it from here: https://daneden.github.io/animate.css/ but it operates the same way.
MAKE SURE THAT YOU CHANGE THE CLASS TO "animated infinite pulse" !!! Will not work otherwise!
<style>.animated {animation-duration: 3s;animation-fill-mode: both;} .animated.infinite {animation-iteration-count: infinite;}</style>
<style>@keyframes pulse {from {transform: scale3d(1, 1, 1);} 50% {transform: scale3d(1.05, 1.05, 1.05);} to {transform: scale3d(1, 1, 1);}</style>
<style>.pulse {animation-name: pulse;}


</div>