Diferencia entre revisiones de «Slidefoto.css»
De WikiCafe
(Página creada con «.container { background-color: white; width: 300px; padding: 50px; float:right; margin-right:-25px; margin-top:-190px; } ul, li { padding: 0; margin:…») |
|||
| (No se muestran 3 ediciones intermedias de otro usuario) | |||
| Línea 5: | Línea 5: | ||
float:right; | float:right; | ||
margin-right:-25px; | margin-right:-25px; | ||
| − | margin-top:- | + | margin-top:-1px; |
} | } | ||
| Línea 43: | Línea 43: | ||
ul.slider li:first-child { | ul.slider li:first-child { | ||
opacity: 1; | opacity: 1; | ||
| − | /*Mostramos el primer | + | /*Mostramos el primer li*/ |
} | } | ||
ul.slider li:target { | ul.slider li:target { | ||
opacity: 1; | opacity: 1; | ||
| − | /*Mostramos el | + | /*Mostramos el li del enlace que pulsemos*/ |
} | } | ||
| Línea 62: | Línea 62: | ||
.menu li a { | .menu li a { | ||
| − | + | display: inline-block; | |
| − | + | color: white; | |
| − | + | text-decoration: none; | |
| − | + | background-color: #681a27; | |
| − | + | padding: 10px 10px 10px 10px; | |
| − | + | width: 15px; | |
| − | + | height: 15px; | |
| − | + | font-size: 12px; | |
| − | + | border-radius: 100%; | |
| + | font-weight: bold; | ||
} | } | ||
Revisión actual del 22:37 8 abr 2021
.container {
background-color: white; width: 300px; padding: 50px;
float:right; margin-right:-25px; margin-top:-1px;
}
ul, li {
padding: 0; margin: 0; list-style: none;
}
ul.slider {
position: relative; width: 300px; height: 300px;
}
ul.slider li {
position: absolute; left: 0px; top: 0px; opacity: 0; width: inherit; height: inherit; transition: opacity .5s; background: #fff;
align-items: center;
}
ul.slider li img {
width: 100%; height: 300px; object-fit: cover;
}
ul.slider li:first-child {
opacity: 1; /*Mostramos el primer li*/
}
ul.slider li:target {
opacity: 1; /*Mostramos el li del enlace que pulsemos*/
}
.menu {
text-align: center; margin: 20px;
}
.menu li {
display: inline-block; text-align: center;
}
.menu li a {
display: inline-block; color: white; text-decoration: none; background-color: #681a27; padding: 10px 10px 10px 10px; width: 15px; height: 15px; font-size: 12px; border-radius: 100%; font-weight: bold;
}
