All About Blog Designing, Useful Tips and Tricks.
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 !!
Baca juga
4 comments
Label List
Add Beautiful Search Box in your blogger
(1)
Add Favicon icon to Blogger URL
(1)
Add Social Networking Sites Buttons beneath to Every Post (Blogger)
(1)
Add Table In Post
(1)
adsense
(1)
All Alt plus (+) keys
(1)
All Useful Shortcut Keys
(1)
Alt + Keys
(1)
Background Images
(1)
Blogger Gadgets
(1)
Blogger Help
(7)
Blogger Safety
(1)
Blogger Search Box-2
(1)
Blogger SEO
(1)
Blogger Tutorials
(5)
Blogger Widgets
(5)
blogging
(2)
Can I get original freecell back for windows 10?
(1)
Codes For Flip Text.
(1)
CSS
(1)
Customize Blog
(21)
Customize Blog. Meta Tag
(1)
Customize Feed Burner Notifications
(1)
Customize Feed Burner Settings
(1)
Customize Template
(2)
Discover More
(3)
Facebook
(3)
Facebook Tips
(10)
Feed Burner
(1)
Flip Text Generator
(1)
Footer
(1)
Free Cell Game
(1)
Free Image Hosting Sites
(1)
Gadget
(7)
Gadgets
(1)
Google Adsense Alternatives 2018
(1)
Hex Color Chart
(3)
HEX Color Code Generator
(1)
How to add flip text. Coding Tutorials
(1)
How to Add Link List of Post
(1)
HTML
(2)
HTML Image Link Code
(1)
HTML LINK
(1)
HTML/Java Script Alignment
(1)
Image Effects
(3)
Image Hyper Linked to External Site
(1)
Images
(1)
Link in Comment Box
(1)
List of HTML Tag
(1)
Marquee HTML CODE
(1)
Media.net
(1)
Old Free Cell Game XP
(1)
Old Solitaire Game.
(1)
Page Navigator
(1)
Recent Post Widget
(1)
REMOVE - SUBSCRIBE TO: POSTS (ATOM)
(1)
Remove Date Header From Blog (Blogger)
(1)
Remove Image Border (Blogger)
(1)
Resetting Free Cell
(1)
Scrolling Text Widget
(1)
Search Box Blogger
(1)
Shortcut Keys
(1)
Template Design
(1)
Whats app flip text
(1)
Widget
(1)
Windows Hack
(1)
Windows XP Game Free Cell
(1)
XML File Extension
(1)
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ซอมบี้