CSS Based Image Hover Effect - Add To Blogger
In This Post we will discover how to add CSS image effect at Blogger. Adding this is very simple task. Copy the given codes and paste at the HTML area ( Blogger >> Layout >> Add a Gadget>> HTML/JavaScript ) paste the following codes. Change image source and target Link Address. If you want to use these effects in post area, paste the entire codes at HTML section of post. Visit Demo link to see How it works.
Copy given codes and pate into HTML/JavaScript.
<style>
.images {width: 300px;height:250px; margin: 50px auto; position:relative;}
.images > div {background-color: rgba(128, 128, 128, 0.5);
float: left;
height: 60px;
margin: 5px;
overflow: hidden;
position: relative;
width: 70px;
z-index: 1;
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-ms-transform:scale(1.0);
-o-transform:scale(1.0);
transform:scale(1.0);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;}
.images > div img{
width: 100%;}
.images > div img{ width: 100%;}
.images > div:hover{
z-index: 5;
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-ms-transform:scale(2.0);
-o-transform:scale(2.0);
transform:scale(2.0);}
.images > div div {
cursor: pointer;
height: 100px;
left: 0;
opacity: 0.4;
position: absolute;
top: 0;
width: 100px;
z-index: 11;
-webkit-transition-duration: 1.1s;
-moz-transition-duration: 1.1s;
-ms-transition-duration: 1.1s;
-o-transition-duration: 1.1s;
transition-duration: 1.1s;}
</style>
<div class="images">
<div>
<a href="Link Address 1" target="blank"> <img src="Image Source Location 1" /></a><div></div></div>
<div>
<a href="Link Address 2" target="blank"> <img src="Image Source Location 2" /></a><div></div></div>
<div>
<a href="Link Address 3" target="blank"> <img src="Image Source Location 3" /></a><div></div></div>
<div>
<a href="Link Address 4" target="blank"> <img src="Image Source Location 4" /></a><div></div></div>
<div>
<a href="Link Address 5" target="blank"> <img src="Image Source Location 5" /></a><div></div></div>
<div>
<a href="Link Address 6" target="blank"> <img src="Image Source Location 6" /></a><div></div></div>
<div>
<a href="Link Address 7" target="blank"> <img src="Image Source Location 7" /></a><div></div></div>
<div>
<a href="Link Address 8" target="blank"> <img src="Image Source Location 8" /></a><div></div></div>
<div>
<a href="Link Address 9" target="blank"> <img src="Image Source Location 9" /></a><div></div><div></div>
Replace Link address 1 to 9 with target link addresses and Image Source Location 1 to 9 with the image source link location. Save the gadget and done ! if you have any confusion feel free to ask !!
Nice
ReplyDelete5
ReplyDeletePS2
E CHE SIA CHIARO, IO NON SON PER NULLA GENIO, RE MIDA ED EROE CIVILE MICHELE NISTA. NON LO SONO, ANCHE SE LO VEDREI BENISSIMO SULLA SEGGIOLA DI STO CESSO NAZISTA E MAFIOSO DI MATTEO RENZI, CORROTTISSIMO DA SILVIO BERLUSCONI, PER FARE LEGGI, E PRENDERE DECISIONI, PRO, QUEST‘ULTIMA „FASCIOCAMORRISTAM ED PEDOFILAM PERSONAM“. DA POSIZIONE DI FINTISSIMO CENTRO SINISTRA, CHE E‘ ORMAI IN REALTA‘, ESTREMISSIMA DESTRA. CERCANDO COSI‘ DI FREGARE TUTTI! SGOZZANDO A MORTE, DEMOCRAZIA, GIUSTIZIA, E LIBERTA‘. NON SONO GENIO, RE MIDA ED EROE CIVILE MICHELE NISTA, CHE, MAI DIMENTICHIAMOCI, OVUNQUE IN VITA SUA ABBIA MESSO LE MANI, HA SEMPRE, SEMPRE E STRA SEMPRE RESO LE PIETRE, ORO. COME QUANDO CIRCA VENTENNE, PREVEDETTE E CON TRE MESI DI ANTICIPO IL MEGA CROLLO DEL DOW JONES DELL’OTTOBRE 1987. AVVENUTO FRA LO SHOCK DI TUTTI, IN BORSA, A MILANO, CHE LO INIZIARONO A CHIAMARE „ IL PROFETA“ ( ED INTANTO SI STRAPPAVANO DALLE MANI, MICHELE,. DA UN POSTO DI LAVORO ALL’ALTRO, IN QUANTO RENDEVA SEMPRE, DESKS CHE FACEVANO ZERO PROFITTI, MILIARDARIE, PUR SE IN LIRE, SUBITO DOPO.. DA QUI IL PASSAGGIO DEL SUO NICK, COLE TEMPO, DA „PROFETA“ A „ RE MIDA“.. E SENZA MAI CHE GIOCASSE SPORCO, SENZA MAI CHE CORROMPESSE O ELUDESSE UNA LIRA, CHE UNA, DI TASSE). A SEGUIRE, MICHELE PREVEDETTE ALLA PERFEZIONE IL MEGA RIALZO DELL’ERA CLINTON, IL CROLLO DEL NASDAQ CON L’ARRIVO ABUSIVISSIMO, FIGLIO DI MEGA FRODI ELETTORALI, DI „ADOLF HITLER - GEORGE [WC] BUSH“. E SPECIALMENTE, QUI, ANTICIPANDO IL TUTTO VIA INTERNET, DAVANTI AGLI OCCHI DEL MONDO INTERO, MICHELE URLO‘ NEL SETTEMBRE 2007 CHE IL DOW JONES SAREBBE CROLLATO DA 13400 A 6900 ENTRO UN SOLO ANNO! TUTTI A DARGLI DEL MATTO, MA IL DOW JONES UN ANNO DOPO VALEVA ESATTAMENTE 6900. LI TUTTI A DARGLI DEL GENIO! COME PREVEDETTE ALLA PERFEZIONE IL PIU‘ CHE RADDOPPIO DEL DOW JONES NELL’ERA DELL’AMMIRABILE OBAMA BARACK ( RIALZO DA LUI PREVISTO SEMPRE DAVANTI AGLI OCCHI DEL MONDO INTERO, DI NUOVO, VIA INTERNET, BEN SEI MESI PRIMA DI QUANDO INIZIO‘ A VERIFICARSI: NEL 3.2009). E DA APRILE 2014, RIPETO, DA APRILE 2014, MICHELE HA DETTO A TUTTI „NOI“, CHE IL DOW JONES SAREBBE SALITO ANCORA, MA PER POI SEMICROLLARE NELLA PARTE FINALE DEL LUGLIO 2014: ACCADUTO AL MILLESIMO. E „NOI“ SAPPIAMO GIA‘ ANCHE DOVE SARA‘ IL DOW JONES ALLE PROSSIME ELEZIONI USA DEL 2016. E SIAMO CERTI CHE SARA‘ ESATTISSIMAMENTE LI, OVE CE LO HA DETTO LUI: GENIO, RE MIDA ED EROE CIVILE MICHELE NISTA. CON LUI SI VINCE SEMPRE E STRA SEMPRE, ALTRO CHE POR-C-ORROTTO BERLUSCONICCHIO SGOZZA DEMOCRAZIA, GIUSTIZIA E LIBERTA‘, PROVETTO DITTATORE PAZZO: MATTEO RENZI ( CHE MICHELE CI DICE FINIRA‘ PEGGIO DI B-O-TTINO CRAXI, E QUINDI CI CREDIAMO, OLTRE CHE LO STRA AUSPICHIAMO... BASTA CHE ACCADA PRESTO, PRIMA CHE IMPONGA ALTRE RIFORME CON LA SVASTICA AL BRACCIO, CHE MANCO HITLER AVREBBE OSATO ANCHE SOLO PENSARE, NON FARE). IL VERME RI SDOGANATORE DI ASSASSINISSIME MAFIA, CAMORRA, NDRANGHETA, FASCISMO E PEDOFILIA, A PALAZZO CHIGI. PUAH.
Nice post. Thanks for sharing this....!!!
ReplyDeletegclub
บาคาร่า
gclub casino
Very helpful suggestions that help in the optimizing website. thank for sharing the link.
ReplyDeleteซอมบี้