in my website (www.ricpedrotti.com) I use PrettyPhoto for the slideshow. I want to lighten and speed up by replacing it with css3 and at most a bit of java. I am able, separately, to make the slideshow and to enlarge the image with the hover, but I am not able to automatically grow the images inside the show. My question is: how do I merge both effects (just like in PrettyPhoto)? P.S. I am willing and passionate, but not very skilled ...
Thank you very much for your reply. I add my code, hoping it's not too primitive, and the img upload is correct.
HTML[tryptics]
<link rel="stylesheet" href='css/stile.css' type="text/css" /><link href="css/stile.css" rel="stylesheet" type="text/css" /><div class="grow"><div class="container"> ![image1]="1.jpg"> ![image2]="2.jpg"> ![image3]="3.jpg"> ![image4]="4.jpg"> ![image3]="3.jpg"> ![image2]="2.jpg"> ![image1]="1.jpg"> ![image4]="4.jpg"></div>
CSS
.container { position:relative; } .container img { position:absolute; width:350px; height:150px } div { margin:200px 250px; width:600px; height:300px; background:white; transition:all 2s ease ; } .grow:hover { -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } @-webkit-keyframes xfade { 0% { opacity: 1; } 12.5% { opacity:1; } 16.5% { opacity:0; } 96% { opacity:0; } 100% { opacity:1; } } @keyframes xfade { 0% { opacity: 1; } 12.5% { opacity:1; } 16.5% { opacity:0; } 96% { opacity:0; } 100% { opacity:1; } } .container img:nth-child(8) { -webkit-animation: xfade 48s 0s infinite; animation: xfade 48s 0s infinite; } .container img:nth-child(7) { -webkit-animation: xfade 48s 6s infinite; animation: xfade 48s6s infinite; } .container img:nth-child(6) { -webkit-animation: xfade 48s 12s infinite; animation: xfade 48s 12s infinite; } .container img:nth-child(5) { -webkit-animation: xfade 48s 18s infinite; animation: xfade 48s 18s infinite; } .container img:nth-child(4) {
-webkit-animation: xfade 48s 24s infinite; animation: xfade 48s 24s infinite; } .container img:nth-child(3) { -webkit-animation: xfade 48s 30s infinite; animation: xfade 48s 30s infinite; } .container img:nth-child(2) { -webkit-animation: xfade 48s 36s infinite; animation: xfade 48s 36s infinite; } .container img:nth-child(1) { -webkit-animation: xfade 48s42s infinite; animation: xfade 120s 48s 42s infinite; }