Well,getting tons of e-mails daily and each of them have its own problem.But,one request that I found was the problem in 4 column featured widget that was pure CSS3.Though,I think that it is better to launch a Jquery version so it can work properly.
Now first make sure that Jquery library in installed in your template otherwise add the following code just above
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>Now find
]]></b:skin>and paste the following code just above it.
.befeature1Now find
{
height: 250px;
overflow: hidden;
width: 900px;
}
.bebox1
{
background:#333;
float: left;
color:#fff;
height: 500px;
margin: 0;
margin-left: 1%;
moz-transition: all .3s ease-in-out;
ms-transition: all .3s ease-in-out;
o-transition: all .3s ease-in-out;
overflow: hidden;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
width: 24%;
}
.bebox1 img
{
width:100%;
height:180px;
}
.bebox1 h1
{
margin:10px;
color: #fff;
font-family: Segoe UI light;
font-size: 19px;
font-weight: lighter;
height:50px;
line-height:19px;
width: 95%;
}
</head>and paste the following code just above it
<script>Now save the template and go to layout > add widget > HTML/javascript and add the following code in it.
$(document).ready(function(){
$(".bebox1").hover(function(){
$(this).find("img").slideUp(200);
},function(){
$(this).find("img").slideDown(200);
});
});
</script>
<div class="befeature1">Just Replace the above highlighted lines with its respective content.
<div class="bebox1">
<img src="First Image URL"/>
<h1>FIRST HEADING</h1>
<p>FIRST DESCRIPTION</p>
</div>
<div class="bebox1">
<img src="Second Image URL"/>
<h1>SECOND HEADING</h1>
<p>SECOND DESCRIPTION</p>
</div>
<div class="bebox1">
<img src="THIRD Image URL"/>
<h1>THIRD HEADING</h1>
<p>THIRD DESCRIPTION</p>
</div>
<div class="bebox1">
<img src="Fourth Image URL"/>
<h1>FOURTH HEADING</h1>
<p>FOURTH DESCRIPTION</p>
</div>
</div>
Post A Comment:
0 comments: