Hi everybody
I have this code html css and javascript
How do I show two images with distance between them of 5px
I made an example on my site but does not work javascript
On the side works
How to change the code to appear in two images
Thanks to all
<script type="text/javascript">
$ = jQuery;
$(document).ready(function(){
initializareImagini(450);
});
function initializareImagini(speed){
$(".image").each(function(){
var img = $(this),
w = img.width();
img.children(".details").css({
"left":w+"px"
});
});
$(".image").hover(function(){
$(this).children(".details").stop(true).animate({"left":"0px"}, speed);
}, function(){
$(this).children(".details").stop(true).animate({"left":$(this).width()+"px"}, speed);
});
}
</script>
<style>
.image{
float: left;
width: 92%;
margin: 5px;
overflow: hidden;
position: relative;
}
.image img{
width: 100%;
float: left;
}
.image .details{
position: absolute;
width: 100%;
top: 0px;
left: 0px;
font-family:tahoma;
background-image: url('http://www.retete-super.ro/wp-content/themes/retetesuper/images/Bottom_texture.jpg');
}
.image .details .text{
padding: 0 3.125% 3.125% 3.125%;
text-align: left;
color: #3C3C3C;
font-size: 0.9em;
line-height: 1.2em;
}
.image .details .title{
display: block;
padding: 3.125%;
text-align: left;
color: #3C3C3C;
font-size: 1em;
line-height: 1.2em;
font-weight: 700;
}
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
</style>
<!-- iar de aici in jos cate poze vrei tu.... -->
<div class="image">
<img src="http://www.retete-super.ro/wp-content/uploads/2012/12/Salata-exotica-cu-nuci.jpg" />
<a href="http://www.retete-super.ro/salata-exotica-cu-nuci/"><span class="clickable"></span></a>
<div class="details">
<div class="title"> Salata exotica cu nuci </div>
<div class="text">
Ingrediente:
2 fructe de mango
2 fructe de papaya
3 kiwi
1 pepene fara samburi
5 l.s. stafide
4 cl rom alb
</div>
</div>
</div>
<div class="image">
<img src="http://www.retete-super.ro/wp-content/uploads/2012/12/tort-cu-capsuni.jpg" />
<a href="http://www.retete-super.ro/tort-cu-capsuni/"><span class="clickable"></span></a>
<div class="details">
<div class="title"> Tort cu capsuni</div>
<div class="text">
Ingrediente (pentru circa 12 felii): Pentru aluatul faramicios – 100 g unt,
50 g faina, 20 g zahar, 1 zahar vanilat,
</div>
</div>
</div>
<div class="image">
<img src="http://www.retete-super.ro/wp-content/uploads/2012/12/amandina.jpg" />
<a href="http://www.retete-super.ro/amandine/"><span class="clickable"></span></a>
<div class="details">
<div class="title"> Amandine</div>
<div class="text">
Ingrediente:
Blat:
7 oua
14 linguri zahar
3 linguri apa
3 linguri ulei,
2 linguri cacao
8 linguri faina
1 praf de copt
</div>
</div>
</div>
<div class="image">
<img src="http://www.retete-super.ro/wp-content/uploads/2013/02/retete-super-blogroll.jpg" />
<a href="http://www.retete-super.ro/retete/blogroll/"><span class="clickable"></span></a>
<div class="details">
<div class="title"> Retete Super Blogroll </div>
<div class="text">
Adauga site-ul tau aici
</div>
</div>
</div>