|
|
|
POPOUT DETAILS EFFECT ON BLOGGER - LIVE DEMO
Cool... Isn't it? Just follow the instructions given below to get a similar effect on your blog as well. Just create a back up in case something goes wrong. To do so, navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. That's it!
1. Once the back up is over, paste the following piece of code anywhere between the 'body' tags on your template - probably below <div id='content-wrapper'> (or) <div class='columns fauxcolumns'>.
<ul class="columns">
<li>
<a href="#"><img src="IMAGE URL" /></a>
<div class="info">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</li>
</ul>
<li>
<a href="#"><img src="IMAGE URL" /></a>
<div class="info">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</li>
</ul>
2. Replace '#' with the link you wish to point to and 'IMAGE URL' with the URL of your image, probably with the following dimensions - 220x200px. Similarly, replace 'TITLE' and "DESCRIPTION' with the title and description you wish to have on hover, respectively. Repeat the codes within 'ul' tags for adding multiple images.
You may download the reference code, which I used on the demo site, here - Reference.
3. Let's style the above HTML with some CSS. To do so, search for the following code on your template.
5. You need not modify anything the codes above except for the margin positions to best fit your blog. That's it! Save your template and take a look at the cool effect on your blog.
The above effect worked successfully on the major browsers which includes, but not limited to, IE, Firefox, Chrome, Opera and Safari. So, give them a shot on your blog and let us know whether you enjoyed this cool effect via comments! See you soon with another interesting tutorial. You may check out the other image hover effect here - Shadow Effect.
Inspiration for the above article - Sohtanaka.You may download the reference code, which I used on the demo site, here - Reference.
3. Let's style the above HTML with some CSS. To do so, search for the following code on your template.
]]></b:skin>
4. Paste the following piece of code just above the line mentioned in step 3.ul.columns {
width: 480px;
list-style: none;
padding:0px;
margin-left:10px;
}
ul.columns li {
width: 220px;
float: left; display: inline;
margin-top:15px;
margin-left:7px;
margin-right:7px;
margin-bottom:7px; padding: 0;
position: relative;
}
ul.columns li:hover {z-index: 99;}
ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 210px 10px 20px;
width: 220px;
display: none;
background: #fff;
font-size: 1.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:Georgia,"Times New Roman",Times,serif;
text-align:justify;
}
ul.columns li:hover .info {display: block;}
ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
font-family:Georgia,"Times New Roman",Times,serif;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}
width: 480px;
list-style: none;
padding:0px;
margin-left:10px;
}
ul.columns li {
width: 220px;
float: left; display: inline;
margin-top:15px;
margin-left:7px;
margin-right:7px;
margin-bottom:7px; padding: 0;
position: relative;
}
ul.columns li:hover {z-index: 99;}
ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 210px 10px 20px;
width: 220px;
display: none;
background: #fff;
font-size: 1.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:Georgia,"Times New Roman",Times,serif;
text-align:justify;
}
ul.columns li:hover .info {display: block;}
ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
font-family:Georgia,"Times New Roman",Times,serif;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}
The above effect worked successfully on the major browsers which includes, but not limited to, IE, Firefox, Chrome, Opera and Safari. So, give them a shot on your blog and let us know whether you enjoyed this cool effect via comments! See you soon with another interesting tutorial. You may check out the other image hover effect here - Shadow Effect.
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
cool, we can add the effect on any widget and post :) with the code in step 1.
REPLY@Blogging: Well, you can add them but you'll end up with some layout issues when you use them in the post editor. Anyway, thanks for the comment:)
REPLYUseful for my blog thanks :)
REPLY@MabZiCLe: I would love to know where you installed the above effect! Anyway, thanks for the comment buddy:)
REPLYUse the tab below to comment. No spam please!!!
POST YOUR COMMENT