Automanual-K gallery

Developer
Kseso
Size
6,412 Kb
Views
18,216
  1. Automanual-K gallery Previews
  2. Automanual-K gallery HTML Codes
  3. Automanual-K gallery CSS Codes
  4. Automanual-K gallery JS Codes

How do I make an automanual-k gallery?

Double transition between frames: automatic while the cursor is outside the gallery and manual on :hover. What is a automanual-k gallery? How do you make a automanual-k gallery? This script and codes were developed by Kseso on 17 October 2022, Monday.

Automanual-K gallery Previews
IQ Test

Automanual-K gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>automanual-K gallery</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * {margin: 0; padding: 0; border: 0 none;}
*, *:after, *:before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body { background: #221E20; font-family: 'Josefin Slab',sans-serif; font-weight: 400; height: 100vh; width: 100vw; }
header { height: 100vh; overflow: hidden; position: relative; width: 100%; z-index: 1; text-align: center;
}
h1 { display: inline-block; font-size: 6rem; text-align: center; position: absolute; display: block; bottom: 0; width: 100%; z-index: 2; line-height: 6rem; letter-spacing: 1px;
}
h1:after, h1:before { border-bottom: 3px double #88D6F2; border-top: 3px double #88D6F2; content: ""; display: block; height: 0; left: 0; position: absolute; right: 0; top: 2.7rem; z-index: -1; opacity: .6;
}
h1:after { top: 4.7rem;
}
h1 a {color: #2D4261; text-decoration: none; text-shadow: 0 0 1px #fff;}
h1:hover a {color: #FBF066;}
h1:hover:after, h1:hover:before{ border-bottom-color: #EF5823; border-top-color: #EF5823;
}
h2 {color: #FBF066; font-size: 4vw;}
.visor { height: 100%; width: 500%; position: absolute; top: 0; transition: .5s linear; animation: deslizante 20s ease-out 0s backwards infinite alternate-reverse; /*animation-play-state: running;*/
}
article { display: inline-block; width: 20%; height: 100%; position: relative; overflow: hidden; background-attachment: fixed; background-position: center center; background-size: cover;
}
article > div { max-width: 70%; background: linear-gradient(to left, rgba(0,0,0, .8) 0%, rgba(0,0,0, .3) 75%, rgba(0, 0, 0, 0)); position: absolute; right:0; top: 0; bottom: 0; padding: 8vh 0 0; font-size: 3vw; letter-spacing: 1px; color: #88D6F2; text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 2px 0 #000, 2px 0 0 #000;
}
.uno {background-image: url(https://lh6.googleusercontent.com/-eav9SkfN-Rk/UiVgg_A6WQI/AAAAAAAAIn4/ifw9T7T01Go/w908-h595-no/P0715+-+Lakeside+Milky+Way+-+FullSize+With+Watermark.jpg)}
.dos {background-image: url(https://lh5.googleusercontent.com/-mPVvaowWI1Y/UiXra7I45CI/AAAAAAAACsI/hzfgh3ZvRFM/w893-h595-no/Rainjwweb.jpg)}
.tres {background-image: url(https://2.bp.blogspot.com/-84F3YvIAUvw/V-pfeoyFaXI/AAAAAAAANPc/Y4nYWBfGS0E5lyzC6gEvyCyG4hLhBk9wwCLcB/s1200/night-Martin_Str_Pixabay.jpg)}
.cuatro {background-image: url(https://lh6.googleusercontent.com/-fNzsseY30Lc/UiTd-Ay3qxI/AAAAAAAAb5A/MBMgOCnASGg/w893-h595-no/20130503-MH1C2027.jpg)}
.cinco {background-image: url(https://2.bp.blogspot.com/-5gMpw0IRU3w/V_1IaZEyUiI/AAAAAAAANRM/ibCltDTe2fwFModiBDck1dQy9doNOOi8wCLcB/s1600/MWTree_Toledano_6016.jpg)}
input[type=radio] { z-index: 10; position: relative; display: inline-block; visibility: hidden;
}
input + label { background: none repeat scroll 0 0 rgba(236, 178, 39, 0.5); border-radius: 50% 50% 50% 50%; cursor: pointer; display: inline-block; font-size: 2rem; color: #aaa; line-height: 2rem; margin-top: 0.5rem; overflow: hidden; position: relative; width: 2rem; z-index: 10;
}
label {opacity:.15;}
header:hover label {opacity: .8}
input[name='tractor']:checked + label { background: #BEF202; box-shadow: 0 0 5px rgba(0,0,0,.5); color: #444;
}
header .visor { animation-play-state: running;
}
header:hover .visor { animation-play-state: paused;
}
header:hover input[id='uno']:checked ~ .visor {left: 0;animation: ninguna;}
header:hover input[id='dos']:checked ~ .visor {left: -100%;animation: ninguna;}
header:hover input[id='tres']:checked ~ .visor {left: -200%;animation: ninguna;}
header:hover input[id='cuatro']:checked ~ .visor {left: -300%;animation: ninguna;}
header:hover input[id='cinco']:checked ~ .visor {left: -400%;animation: ninguna;}
/*header:hover input[id='play']:checked ~ .visor, input[id='play']:checked ~ .visor {animation-play-state: running!important;}*/
@keyframes deslizante { 0% {left: 0%; } 15% {left: 0%; } 20% {left: -100%; } 35% {left: -100%; } 40% {left: -200%; } 55% {left: -200%; } 60% {left: -300%; } 75% {left: -300%; } 80% {left: -400%; } 95% {left: -400%; } 100% {left: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:400' rel='stylesheet'https://codepen.io/pen/# type='text/css'>
<header> <h1><a href='https://ksesocss.blogspot.com/2013/09/galeria-css-manual-automatica.html'>automanual-K</a></h1> <!-- <input type="radio" id="play" value="7" name="tractor" checked='checked' /> <label for="play">▶</label>--> <input type="radio" id="uno" value="1" name="tractor" /> <label for="uno">1</label> <input type="radio" id="dos" value="2" name="tractor" /> <label for="dos">2</label> <input type="radio" id="tres" value="3" name="tractor" /> <label for="tres">3</label> <input type="radio" id="cuatro" value="4" name="tractor" /> <label for="cuatro">4</label> <input type="radio" id="cinco" value="5" name="tractor" /> <label for="cinco">5</label> <section class='visor'> <article class='unidad uno'> <div> <h2>Sobreviví la noche</h2> <p>De algún modo sobreviví la noche y entré en el día.</p>
<p>Al salvado le basta su salvación aunque no sepa el cómo.</p> <p>Así tomo mi lugar entre los vivos, como si alguien me escoltase,</p>
<p>candidata al azar de la mañana
pero citada con los muertos.</p> <cite>Emily Dickinson</cite> </div> </article><!-- --><article class='unidad dos'> <div> <h2>Noche</h2> <p>Desciende el sol en occidente,
brilla el lucero vespertino;
los pájaros callan en sus nidos,
y yo debo buscar el mío.
La luna, como una flor
en el inmenso arco del cielo,
con placer silencioso,
se instala y sonríe en la noche.
Adiós, campos verdes y arboledas dichosas
donde los rebaños hallaron su deleite.</p> <cite>William Blake</cite> </div> </article><!-- --><article class='unidad tres'> <div> <h2>Vientos estelares</h2> <p>Ésta es la hora en que los poetas lunáticos saben qué hongos brotan en Yugoth, y qué perfumes y matices florales, desconocidos en nuestros pobres jardines terrenales, llenan los continentes de Nithon. ¡Pero por cada sueño que nos traen estos vientos nos arrebatan una docena de los nuestros!
</p> <cite>H.P. Lovecraft</cite> </div> </article><!-- --><article class='unidad cuatro'> <div> <h2>La noche invernal de un anciano</h2> <p>Más allá de las puertas, a través del frío
que barre la ventana formando unas estrellas
dispersas, en la sombra, el mundo observa su cara:
La habitación está vacía. Y duerme.
La lámpara inclinada muy cerca de su rostro
le impide ver el mundo. Ya no recuerda.
La vejez le impide recordar en qué tiempo
llegó hasta estos lugares, y por qué está aquí solo.</p> <cite>Robert Frost</cite> </div> </article><!-- --><article class='unidad cinco'> <div> <h2>Negra Sombra</h2> <p>Cando penso que te fuches,
negra sombra que me asombras,
ó pé dos meus cabezales
tornas facéndome mofa.
Cando maxino que es ida,
no mesmo sol te me amostras,
i eres a estrela que brila,
i eres o vento que zoa.
Si cantan, es ti que cantas,
si choran, es ti que choras,
i es o marmurio do río
i es a noite i es a aurora.
En todo estás e ti es todo,
pra min i en min mesma moras,
nin me abandonarás nunca,
sombra que sempre me asombras.</p> <cite>Rosalía de Castro</cite> </div> </article> </section> </header> <script src="js/index.js"></script>
</body>
</html>

Automanual-K gallery - Script Codes CSS Codes

* {margin: 0; padding: 0; border: 0 none;}
*, *:after, *:before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body { background: #221E20; font-family: 'Josefin Slab',sans-serif; font-weight: 400; height: 100vh; width: 100vw; }
header { height: 100vh; overflow: hidden; position: relative; width: 100%; z-index: 1; text-align: center;
}
h1 { display: inline-block; font-size: 6rem; text-align: center; position: absolute; display: block; bottom: 0; width: 100%; z-index: 2; line-height: 6rem; letter-spacing: 1px;
}
h1:after, h1:before { border-bottom: 3px double #88D6F2; border-top: 3px double #88D6F2; content: ""; display: block; height: 0; left: 0; position: absolute; right: 0; top: 2.7rem; z-index: -1; opacity: .6;
}
h1:after { top: 4.7rem;
}
h1 a {color: #2D4261; text-decoration: none; text-shadow: 0 0 1px #fff;}
h1:hover a {color: #FBF066;}
h1:hover:after, h1:hover:before{ border-bottom-color: #EF5823; border-top-color: #EF5823;
}
h2 {color: #FBF066; font-size: 4vw;}
.visor { height: 100%; width: 500%; position: absolute; top: 0; transition: .5s linear; animation: deslizante 20s ease-out 0s backwards infinite alternate-reverse; /*animation-play-state: running;*/
}
article { display: inline-block; width: 20%; height: 100%; position: relative; overflow: hidden; background-attachment: fixed; background-position: center center; background-size: cover;
}
article > div { max-width: 70%; background: linear-gradient(to left, rgba(0,0,0, .8) 0%, rgba(0,0,0, .3) 75%, rgba(0, 0, 0, 0)); position: absolute; right:0; top: 0; bottom: 0; padding: 8vh 0 0; font-size: 3vw; letter-spacing: 1px; color: #88D6F2; text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 2px 0 #000, 2px 0 0 #000;
}
.uno {background-image: url(https://lh6.googleusercontent.com/-eav9SkfN-Rk/UiVgg_A6WQI/AAAAAAAAIn4/ifw9T7T01Go/w908-h595-no/P0715+-+Lakeside+Milky+Way+-+FullSize+With+Watermark.jpg)}
.dos {background-image: url(https://lh5.googleusercontent.com/-mPVvaowWI1Y/UiXra7I45CI/AAAAAAAACsI/hzfgh3ZvRFM/w893-h595-no/Rainjwweb.jpg)}
.tres {background-image: url(https://2.bp.blogspot.com/-84F3YvIAUvw/V-pfeoyFaXI/AAAAAAAANPc/Y4nYWBfGS0E5lyzC6gEvyCyG4hLhBk9wwCLcB/s1200/night-Martin_Str_Pixabay.jpg)}
.cuatro {background-image: url(https://lh6.googleusercontent.com/-fNzsseY30Lc/UiTd-Ay3qxI/AAAAAAAAb5A/MBMgOCnASGg/w893-h595-no/20130503-MH1C2027.jpg)}
.cinco {background-image: url(https://2.bp.blogspot.com/-5gMpw0IRU3w/V_1IaZEyUiI/AAAAAAAANRM/ibCltDTe2fwFModiBDck1dQy9doNOOi8wCLcB/s1600/MWTree_Toledano_6016.jpg)}
input[type=radio] { z-index: 10; position: relative; display: inline-block; visibility: hidden;
}
input + label { background: none repeat scroll 0 0 rgba(236, 178, 39, 0.5); border-radius: 50% 50% 50% 50%; cursor: pointer; display: inline-block; font-size: 2rem; color: #aaa; line-height: 2rem; margin-top: 0.5rem; overflow: hidden; position: relative; width: 2rem; z-index: 10;
}
label {opacity:.15;}
header:hover label {opacity: .8}
input[name='tractor']:checked + label { background: #BEF202; box-shadow: 0 0 5px rgba(0,0,0,.5); color: #444;
}
header .visor { animation-play-state: running;
}
header:hover .visor { animation-play-state: paused;
}
header:hover input[id='uno']:checked ~ .visor {left: 0;animation: ninguna;}
header:hover input[id='dos']:checked ~ .visor {left: -100%;animation: ninguna;}
header:hover input[id='tres']:checked ~ .visor {left: -200%;animation: ninguna;}
header:hover input[id='cuatro']:checked ~ .visor {left: -300%;animation: ninguna;}
header:hover input[id='cinco']:checked ~ .visor {left: -400%;animation: ninguna;}
/*header:hover input[id='play']:checked ~ .visor, input[id='play']:checked ~ .visor {animation-play-state: running!important;}*/
@keyframes deslizante { 0% {left: 0%; } 15% {left: 0%; } 20% {left: -100%; } 35% {left: -100%; } 40% {left: -200%; } 55% {left: -200%; } 60% {left: -300%; } 75% {left: -300%; } 80% {left: -400%; } 95% {left: -400%; } 100% {left: 0; }
}

Automanual-K gallery - Script Codes JS Codes

// The images are from "Night Photography" comunity of G+
// https://plus.google.com/u/0/communities/116739301264243698053
// All the credits to the authors
Automanual-K gallery - Script Codes
Automanual-K gallery - Script Codes
Home Page Home
Developer Kseso
Username Kseso
Uploaded October 17, 2022
Rating 3
Size 6,412 Kb
Views 18,216
Do you need developer help for Automanual-K gallery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kseso (Kseso) Script Codes
Name
Picture with art direction by orientation
Auto Honeycomb CSS Grid Layout
Autofill the space between elements with dots. pure Css
Slider with oblique border
Slicing images pure Css and more
Parallax pure Css
MagiCSSKroll
Gamma-Corrected Colorizing
DYNAMIC OUTSIDE BLUR PURE CSS
Three Labels for each Input
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!