FREE Black and Pink Custom Galleries CSS Code

For anyone who wants their galleries like this...

Just copy n' paste this to your custom css code:

/* Gallery */
.photo_gallery_preview {
  color:#FFCCFF;
  width:100px;
  height:150px;
  padding:3px;
  font-weight:bold;
  text-shadow:-4px 8px 9px #000;
  font-size:12px;
  background:rgba(0,0,0,1);
  outline:1px solid #000 -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  transition:all .5s ease;
}

.photo_gallery_preview:hover {
  font-weight:bold;
  font-style:none;
  color:#FFF;
  padding:5px;
  background:rgba(204,0,102,1);
  -webkit-box-shadow:inset 0 10px 10px 0 #000;
  -moz-box-shadow:inset 0 5px 5px 0 #000;
  box-shadow:inset 0 5px 5px 0 #000;
  text-shadow:-4px 8px 9px #000;
  font-size:12px;
  position:relative;
  -moz-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -webkit-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -o-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -ms-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
}

img {
  outline:1px solid #728F8F;
}

.photo_gallery_preview .photo_gallery_count {
  font-size:15px;
}

.photo_gallery_preview a,.photo_gallery_preview a:link,.photo_gallery_preview a:active,.photo_gallery_preview a:hover,.photo_gallery_preview a:visited {
  color:#FCFCFC;
  text-decoration:none;
  white-space:nowrap;
}

Custom Border Colors for MFC Galleries

For anyone who wants borders that change color on hover like this...

Here's a few different colors to choose from, just copy n' paste the code for the one that you want in your custom css, that's it!
 

Pink

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FF0066;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Red

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FF0000;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Light Blue

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #00FFFF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Dark Blue

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #0000FF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Green

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #00FF00;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Yellow

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FFFF00;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

NEW Amazon & Twitter Graphics to Choose From

Lots of girls seem to love the Amazon & Twitter graphics that highlight when you hover the cursor over them. 

So I thought I'd make them in a few different colors to choose from.

Edit the bold red text before pasting this HTML code in the about me section on the edit profile page.

<div class="link-amazon">
<a href="Your wishlist url" target="_blank">Amazon Wishlist</a>
</div>
<div class="link-twitter">
<a href="http://twitter.com/Your_Twitter_user_name" target="_blank">Twitter</a>
</div>

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggruNnTUTEoaY2k2d2ni9MxUhXh_Tof0mxnpMgqWKL9An6u7r-gy0q2WgNn_SX9Aya5LRtjNcZe7RgFe2hbHzU2Gv2DVTCQuZEEEIN3rfu8Rw9JCP0BUfcpnwcuTSPjbapofnjpOP1MDs/s1600/amazon_blue.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBme4Rs7BI5gGH3pNNYbSe6yqDMH50PmXg9hQdxicDwx6rbfExfmuliiq3vJv3faEoWFF_B8Bng6DoSPYTdWKzJdxjoLu0SuYYf4q4_nciCkdeMUBmiBMWNx8M5TgFPxW_whLXs8yzV4/s1600/amazon_gold.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj629uZEB_weSmDRUuLBATDnpkbuR2HRSS8uEm_d-CakE3nh45Mq2G6MAwNrYpKBRnM53hQ_fuaL533xWyhOs8Iop54yfu9wQ4LEoAL_rZ1Co8eQVexQPDD7TqjHLVrTLXiwotxp2UsvuI/s1600/amazon_pink.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMDNOG3z9o_UJ0zyDf_lHucZXptieWHYIsUlnS7k6IxrnP19pZ2fbu6KiyCnl51fPgk1qAbcylL9NhXM33tzhPEwSHIZqmF1ICBBCafoXdX1p4-h5B3rcotXf7qvdSbGfjkD_LWxaEK4/s1600/amazon_purple.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxsm3Po5FUhfDZNve-4dNnxPVn7rnmhCb6UUgdeiFWYotB46shRpshFBL4bWoLafbu9OQ3vnlLgabvGIUEB3ewIyID8CB2TuXxlVQtHUDT1R6BREp2B4FjAKQ4PJH_-ZSjOcNBDlJ4ok/s1600/twitter_blue.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyuxaa41tccY0eoB1TSC67ipAi9jv-TxYOJmkuloR5Zv6Ghv3J1QrKzaHmVTyCqB5vwebfdCne2DxPaWtTcon5m_-sMISLLQ6vHK6BLPxKbhBIFJyDCBnwt0_Dc82BGiYCvytc6rD8Lc/s1600/twitter_gold.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLDNL1LFZ0Q56hm6CE8hueQn5xKRjcLnaGRi5brUEcq0WBYYKDJEdUfnLshOEBko2Yy7BJkUsYg9uAj399OPCwPPaCcIlVFuvupm3MJtETC0Xpehnp0ogkU2mWL6-FLt-368MhVHBBB0/s1600/twitter_pink.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxruIAYzYGg03cMDEGjkEKzj7p_14S7raMuL5J32mEXf515v8yJY2ZZ3_JKDeUl-gBpyjaxaiPmgYdEYgjYV4NrqNZf3bE2id4jEjG3_4ChpDSovRKwJOx7Kjx5OT9GEq9m1nz6ZRZKSM/s1600/twitter_purple.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

Make Icons Glow Neon Pink on C4S

Another image/link effect I put together to add to your clips4sale store.

Amazon, Twitter, and Tumblr clickable icons that highlight neon pink when you scroll over them with your mouse,

Paste the HTML code where ever on your page that you want it to show up. (Change the highlighted links to your specific URL)

HTML Code:

<div style="text-align: center;">

<a href="http://www.amazon.com/" target="_blank"><img alt="http://www.amazon.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoYYKxqSA8V3sWuCrDVYfG3IVhmukPyZhWW-eIAr1HehnkNslYLVWu0fahvPIwwZlWaVZ_rrXdRg4DELKX6NW8Ia_iRqUst26sQLSMLV0qx9ycooSVWJjsP4fzFe4NApM9SGoKR96EhE/s1600/amazon-logo-8.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoYYKxqSA8V3sWuCrDVYfG3IVhmukPyZhWW-eIAr1HehnkNslYLVWu0fahvPIwwZlWaVZ_rrXdRg4DELKX6NW8Ia_iRqUst26sQLSMLV0qx9ycooSVWJjsP4fzFe4NApM9SGoKR96EhE/s1600/amazon-logo-8.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcS_cLH7Nk4xcSQFOw_Ef1fRTBBzttToZhrRy6PNYZdUoKJJtfuQclx2hkuob55o7s1EtLTA2n003-zi0Eag3XEWwE23fht6T2N7mGeWDGyDs0eLNXCc6QaJmHH8FR-xCoWdmBugWd3s/s1600/amazonpink.png'" /></a>

<a href="https://twitter.com/" target="_blank"><img alt="https://twitter.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0GI_77HnkMLhSv-Wu5uuOoiFSNk0USUH8D48ArHMatvdEpBffewLqgSSuQuRVglVgGkbe5mvJiUewZ4KuiwB8rIoBHbg1K9kFcxS6beWh1YyFtAi3Gx0mvDDrvht1_2KIqt2nRKVkpQ/s1600/twitter+(1).png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0GI_77HnkMLhSv-Wu5uuOoiFSNk0USUH8D48ArHMatvdEpBffewLqgSSuQuRVglVgGkbe5mvJiUewZ4KuiwB8rIoBHbg1K9kFcxS6beWh1YyFtAi3Gx0mvDDrvht1_2KIqt2nRKVkpQ/s1600/twitter+(1).png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXiLJlVy4SyaYrk_8dExeC081AW2X7IGFMU1qaSsil9Kc6W7UnQbhwQ_7GjzM4Gw44EsOnKFwePwR5yYyGxAWTue413PUECGEyLZh2I74f-CzQ7s5po-0MumN0IcT_05JFnwWllnA0WU/s1600/68058JC81HF8L.png'" /></a>

<a href="http://tumblr.com/" target="_blank"><img alt="http://tumblr.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgEgyzR5Vdjr3-8Epky0o_0in5CR4artqo3-pLWCDRaJsZ5Awi-IEu81XA7q_IWBDxgdsdOktd6UpOOblPldXie6E7KoP2_uIe8WDZN8y7Ox_JQm-bJLeXJzSsz-Ep5Vwa40GI1zvLk0/s1600/tumblr.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgEgyzR5Vdjr3-8Epky0o_0in5CR4artqo3-pLWCDRaJsZ5Awi-IEu81XA7q_IWBDxgdsdOktd6UpOOblPldXie6E7KoP2_uIe8WDZN8y7Ox_JQm-bJLeXJzSsz-Ep5Vwa40GI1zvLk0/s1600/tumblr.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gHsL5RjTtxSJtsFqolx4DDNXOYHhc_zyP0NNPX7yQ1zP0uqHbC2YQ-PgWZeScpTY6L9sODdlB2P-0ofBzxjYyFy1REBx3vXzlaO12FbwaxC7_atiT8T0VwHCA88aGHTHuKZmMsUYcG8/s1600/tumblrpink.png'" /></a> </div>

FREE MFC Profile: Neon Pink

Just finished making this, and I'm too burned out to write the tutorial on how to edit it right now. But those of you who know a little about css and html can figure it out I'm sure. So I'm gonna go a head and post the codes for it now. And anyone who wants to, can play around with it until I write the tutorial.

Here's some screen shots of it:

Neon Text Effect

If you have a profile with a dark background you may want to try out using this Neon effect for some of your text.

Add this code to advance the css section:

.neontext {
  font-size:17px;
  color:#fff;
  text-shadow:0 0 1px rgb(255,255,255),0 0 2px rgb(255,255,255),0 0 4px rgb(255,255,255),0 0 8px rgb(255,45,149),0 0 16px rgb(255,45,149),0 0 32px rgb(255,45,149),0 0 40px rgb(255,45,149),0 0 50px rgb(255,45,149);
  font-wight:bold;
}


Then add whatever text you want in the Edit Profile section in between these two brackets:

<span class="neontext"> Your text goes here </span>

Amazon, Instagram, & Twitter Twirling Transition Effect

If you would just like to use the amazon, instagram, and twitter link effects that are in the last post, but not the whole profile layout; here's where you can find the code...

https://gist.github.com/anonymous/7956163


See it in action here:
http://codepen.io/pokerbabe69mfc/full/zbHxu

Highlight your gallery photos pink

CSS Code:

.gallery_image { border: 0; } .gallery_image img { width: 70px; height:70px; border:6px solid #000; border-radius:8px; borderradius:8px; -moz-border-radius:8px; -moz-border-radius:8px; margin: 0 10px 4px -6px; -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -ms-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); } .gallery_image img:hover { border:6px solid #ff1588; -webkit-transition: all 50ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -moz-transition: all 50ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -ms-transition: all 50ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -o-transition: all 50ms cubic-bezier(0.250, 0.250, 0.750, 0.750); transition: all 50ms cubic-bezier(0.250, 0.250, 0.750, 0.750); }

To make images glow/highlight when you scroll over them:

If you look at my profile you'll see that some of my images light up when you scroll over them.
You'll need to put this css code in your customize section:
(Highlighted in red is what you would need to change depending on what color you want. You can find the different codes by going here)

 .highlight {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:4px solid rgba(0,0,0, 0.0);
}

.highlight:hover {
    box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -webkit-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -moz-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    border:4px solid rgba(255,0,255,1.0);
}


Then you want to this to your html image that you want highlighted

< img src="mypicture.jpg" class="highlight"/>
substitute the mypicture.jpg for your images url. The part you want to add is the class="highlight".