Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafa-martin

ajustar imagens no css

Por , em Desenvolvimento frontend

Recommended Posts

rafa-martin    2

rafa-martin
Postado

peguei o exemplo abaixo da internet e adaptei a minha necessidade. no entanto, as imagens estão aparecendo sempre da última para a primeira e não sei qual o motivo.

 

alguém poderia me ajudar?

 

 

 
<!DOCTYPE html>
<html lang="">
<head>  
<meta charset="utf-8">
<title>Pure CSS3 Animated Sliding Image Gallery - No JS | View in Safari or Chrome</title>
<!-- <link rel="stylesheet" href="dist/css/lightbox.css"> -->
 
<style type="text/css">
 
* {
margin: 0;
padding: 0;
}
 
img {border: none;}
 
a {outline: none;}
 
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background: url(images/post-BG.png) repeat;
text-align: center;
color: #fff;
}
 
h1 {
margin: 30px 0 0 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}
 
h3 {
margin: 10px 0 10px 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}
 
 
 
/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
 
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
 
}
 
50% { 
opacity: 0;
}
 
100% { 
opacity: 1;
}
}
 
#box {
text-align: left;
width: 700px;
margin: 30px auto 0 auto;
background: #000;
overflow: hidden;
border: 10px solid #000;
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px; 
-webkit-animation-name: fadeIn; 
   -webkit-animation-duration: 3s; 
   -webkit-animation-iteration-count: 1;
   -webkit-animation-delay: 0s;
}
 
ul#slider{
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden; 
}
 
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}
 
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 35px;
height: 35px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
 
ul#thumb a:hover {
opacity: 1;
} 
 
ul#slider li { 
width: 700px;
height: 438px;
position: absolute;
}
 
ul#slider li p {
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
 
ul#slider li p span {
line-height: 1.2em;
padding: 10px;
display: block;
}
 
/* Animation for the :target image. Slides the image in. */
 
@-webkit-keyframes moveTarget {
0% {
left:-700px;
 
}
 
100% { 
left:0px;
}
}
 
 
ul#slider li:target {
-webkit-animation-name: moveTarget; 
-webkit-animation-duration: .5s; 
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
 
/*
Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
*/
 
@-webkit-keyframes moveIt {
0% {
left:0px;
 
}
50% {
left:700px;
 
}
100% { 
left:-700px;
z-index: 5;
}
}
 
ul#slider li:not(:target) {
-webkit-animation-name: moveIt; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}
 
</style>
 
</head>
 
<body>
 
<h1>Pure CSS Sliding Image Gallery - No JS</h1>
<h3>View in Safari or Chrome</h3>
<p>Works well in Firefox and Opera too but no slidey slidey!</p>
 
<div id="box">
 
<ul id="slider">
<li>
<img src="images/scotch-egg.jpg"  width="700" height="438" />
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
</li>
<li>
<img src="images/tempphoto-1.jpg" alt="ladybug" width="700" height="438" />
<p><span>Mind your step!</span></p>
</li>
<li>  
<img src="images/tempphoto-2.jpg" alt="lotus" width="700" height="438" />
<p><span>This is an image of a big flower!</span></p>
</li>
<li>
<img src="images/tempphoto-3.jpg" alt="stones" width="700" height="438" />
<p><span>Damn! Those are some nice looking stones!</span></p>
</li>
 
<li>
<img src="images/tempphoto-4.jpg" alt="stones" width="700" height="438" />
<p><span>Damn! Those are some nice looking stones!</span></p>
</li>
 
<li>
<img src="images/tempphoto-5.jpg" alt="stones" width="700" height="438" />
<p><span>Damn! Those are some nice looking stones!</span></p>
</li>
 
<li>
<img src="images/tempphoto-6.jpg" alt="stones" width="700" height="438" />
<p><span>Damn! Those are some nice looking stones!</span></p>
</li> 
</ul>
 
<ul id="thumb">
<li><a href="#"><img src="images/scotch-egg.jpg" alt="grass-blades" width="50" height="50" /></a></li>
<li><a href="#"><img src="images/tempphoto-1.jpg" alt="ladybug" width="50" height="50" /></a></li>
<li><a href="#"><img src="images/tempphoto-2.jpg" alt="lotus" width="50" height="50" /></a></li>
<li><a href="#"><img src="images/tempphoto-3.jpg" alt="stones" width="50" height="50" /></a></li>
<li><a href="#"><img src="images/tempphoto-4.jpg" alt="grass-blades" width="50" height="50" /></a></li>
<li><a href="#"><img src="images/tempphoto-5.jpg" alt="ladybug" width="50" height="50" /></a></li>
<li><a href="#"><img src="images/tempphoto-6.jpg" alt="lotus" width="50" height="50" /></a></li> 
</ul>
 
</div>
 
<!-- <script src="dist/js/lightbox-plus-jquery.min.js"></script> -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito