Is it possible to create a slideshow using HTML with CSS? Similar to the slideshows created by Powerpoint, except in code.
You can do it like that in your HTML file.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Or you can go to W3 school to try it yourself.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr
you can use only slider with html and css:
<div class="slider-container">
<div class="menu">
<label for="slide-dot-1"></label>
<label for="slide-dot-2"></label>
<label for="slide-dot-3"></label>
</div>
<input id="slide-dot-1" type="radio" name="slides" checked>
<div class="slide slide-1"></div>
<input id="slide-dot-2" type="radio" name="slides">
<div class="slide slide-2"></div>
<input id="slide-dot-3" type="radio" name="slides">
<div class="slide slide-3"></div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
}
img {
max-width: 100%;
}
.slider-container{
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 .2em 1em;
&:hover {
background: red;
}
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s .75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left .65s ease-out;
}
.slide-1 {
background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}
.slide-2 {
background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}
.slide-3 {
background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}
Related
So I have made a simple HTML and CSS website with the background image currently set as the ocean picture.
Here is the code for this website
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li>Cooking</li>
<li>Writing</li>
<li>Creative</li>
<li>Photography</li>
</ul>
</div>
<div class="title">
<h1>Nila Palmo Ram</h1>
</div>
<div class="button">
ARTICLES
ARTWORK
</div>
</header>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: Century Gothic; }
header{
background-image: url(../2.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
ul li.active a{
background-color: #fff;
color: rgb(115, 196, 233);
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 10%;
left: 20%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
For this website I want the background image to be a slider showing three images. I have built the slider separately. Here is the code for the slider:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website2</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for(i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
CSS:
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
Could someone please tell me how I can make the slider of pictures the background of my website?
Thank you!
Make use of position:absolute and set the container height and width to 100%. (I used vh & vw to take the device/view height and width).
I hope you can take it forward. Cheers!!!
// no change here
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
/* added */
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
/* added */
.mySlides img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!-- image urls changed -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1422246654994-34520d5a0340?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1523706120980-3f90ca135ad6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I found this slider in JSFiddle on https://www.cssscript.com/demo/full-width-horizontal-page-slider-with-pure-html-css/ and I have changed it little bit.
I am trying to slide the sections automatically every 5 seconds in a loop. Currently, it slides down every 5 seconds but if you just visit the page and click Section Four on the header in 3rd second, after 2 seconds later it will bring you to 2nd slide but actually it should've brought you to 1st section.
I have tried to find something on thus but unfortunately, my knowledge on this very limited. Your help is much appreciated.
JSFiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
</style>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
var variableToCancelInterval = setInterval(function () {
$(".slide2").click();
}, 5000);
var variableToCancelInterval = setInterval(function () {
$(".slide3").click();
}, 10000);
var variableToCancelInterval = setInterval(function () {
$(".slide4").click();
}, 15000);
var variableToCancelInterval = setInterval(function () {
$(".slide1").click();
}, 20000);
</script>
</body>
</html>
You can use setInterval() like this
var i = 0;
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
i = $(this).index() + 1;
});
var Interval = setInterval(function(){
i = (i === $('.btn').length) ? 1 : i + 1;
$('.btn.slide'+i).click();
} , 5000);
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
.btn.active{
background : #62ce36;
color : #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider</title>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
</script>
</body>
</html>
(I created a post that was taken down because I don't think I gave enough info or something? I added more here, including the html code that I put together. Please let me know if this is not acceptable.)
I am trying to create a horizontal carousel where you can click the images that are linked to other pages. I have tried multiple types of carousels through HTML that I found on w3schools.com and other websites, but none of them were exactly what I was looking for. Here is what I was able to put together but it just isn't what I'm looking for. It doesn't scroll through the images like a carousel. I would also like to make the images links. Any suggestions?
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<div class="container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Lagoon">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Airport">
</div>
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Plants">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Jeep">
</div>
<div class="column">
<img class="demo cursor" src="image5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Lagoon Again">
</div>
<div class="column">
<img class="demo cursor" src="image6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Airport Again">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Here is a second one that I tried but it's just not right:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<div class="pagination">
«
<img src="https://example.com/image1.jpg" alt="Throw" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image2.jpg" alt="room" style="float: left; width: 22%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image3.jpg" alt=" sectional" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image4.jpg" alt="1970" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image5.jpg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://exmple.com/image6.jpeg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
»
</div>
</body>
</html>
Here are two examples of what I would want it to look like:
Images after "my art" part are not showing. Cursor is changing when you slide under the MY ART. So images are probably there, but not showing. The problem might be in css, but i cant find it.
https://codepen.io/anon/pen/oWKKVj
Im new in HTML, CSS and Java. I took this part from free galleries. https://codepen.io/wunnle/pen/ZLomgG
Please don't yell at me if i made smth stupid. Im trying to make a website for my classes.
<p> help </p>
You can use this code:
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
html,
body {
margin: 0;
padding: 0;
}
.all {
width: 100%;
}
.center {
transform: translate(-50%);
position: absolute;
top: 100px;
left: 50%;
}
.paint {
padding-top: 55%;
font-family: 'Quicksand';
font-size: 30px;
}
.menu {
background-color: transparent;
width: 100%;
}
.menu a {
float: right;
display: block;
color: black;
font-family: 'Quicksand', sans-serif;
text-align: center;
text-decoration: none;
font-size: 17px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.menu a:hover {
background-color: #ddd;
color: black;
}
.menu .icon {
display: none;
}
#-ms-viewport{
width: device-width;
}
#media screen and (max-width: 600px) {
.menu a:not(:last-child) {
display: none;
}
.menu a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.menu.responsive {
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: middle;
}
}
body {
padding: 30px 0;
position: relative;
}
.gallery {
width: 600px;
margin: auto;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 200px;
height: 200px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="all">
<div class="menu" id="myMenu">
Contact
About
My Art
☰
</div>
<div class="center">
<img src="https://s-media-cache-ak0.pinimg.com/736x/15/3c/38/153c381fbb537893047153bad1819568.jpg">
</div>
<br>
<div class="paint" style="text-align: center;">
<p>MY ART </p>
</div>
<div class="gallery">
<div class="img-w">
<img src="https://images.unsplash.com/photo-1485766410122-1b403edb53db?dpr=1&auto=format&fit=crop&w=1500&h=846&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485793997698-baba81bf21ab?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485871800663-71856dc09ec4?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485871882310-4ecdab8a6f94?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485872304698-0537e003288d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485872325464-50f17b82075a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1470171119584-533105644520?dpr=1&auto=format&fit=crop&w=1500&h=886&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485881787686-9314a2bc8f9b?dpr=1&auto=format&fit=crop&w=1500&h=969&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485889397316-8393dd065127?dpr=1&auto=format&fit=crop&w=1500&h=843&q=80&cs=tinysrgb&crop=" alt="" /></div>
</div> </div>
</body>
</html>
Because it cant find the image you're assigning.
<img src="https://placeimg.com/640/480/tech"/>
placeimg is a generated image.
I made some edits to your codepen and forked it.
You also didnt include jquery.
https://codepen.io/anon/pen/awooQB
In your codepen example you have the following
<div class="gallery">
<div class="img-w"><img src="1.jpg" alt="image" /></div>
<div class="img-w"><img src="2.jpg" alt="image" /></div>
<div class="img-w"><img src="3.jpg" alt="image" /></div>
<div class="img-w"><img src="4.jpg" alt="image" /></div>
<div class="img-w"><img src="5.jpg" alt="image" /></div>
<div class="img-w"><img src="6.jpg" alt="image" /></div>
<div class="img-w"><img src="7.jpg" alt="image" /></div>
<div class="img-w"><img src="sunset.jpg" alt="image" /></div>
<div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>
For the images to show in your webpage, the files must be saved in the same location as the html file. So, make sure the images 1.jpg, 2.jpg etc are in the same folder as your html file and they should display as you want them to.
Additionally, using relative paths (i.e. that refer to a file relative to the html by only providing a partial path) like this will mean that your images will never show up on codepen as it has no access to the images.
To make images show up on codepen you need to publish them to the internet somehow (beyond the scope of this question) and use the full URL to the published image (it should start with http:// or https://)
On looking at the CSS though you also have
.img-w img {
display: none;
}
Removing the display:none means the images are displayed, however, i think you want to get the JQuery to work so you should add references to JQuery to your HTML file and then the images will be displayed as per the example below:
Snippet:
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
html,
body {
margin: 0;
padding: 0;
}
.all {
width: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.paint {
padding-top: 55%;
font-family: 'Quicksand';
font-size: 30px;
}
.gallery {
width: 100%;
margin: auto;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 200px;
height: 200px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
.menu {
background-color: transparent;
width: 100%;
}
.menu a {
float: right;
display: block;
color: black;
font-family: 'Quicksand', sans-serif;
text-align: center;
text-decoration: none;
font-size: 17px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.menu a:hover {
background-color: #ddd;
color: black;
}
.menu .icon {
display: none;
}
#-ms-viewport{
width: device-width;
}
#media screen and (max-width: 600px) {
.menu a:not(:last-child) {
display: none;
}
.menu a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.menu.responsive {
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: middle;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
</head>
<body>
<div class="all">
<div class="menu" id="myMenu">
Contact
About
My Art
☰
</div>
<div class="center">
<img src="painter.png">
</div>
<div class="paint">
<center>
<p>MY ART </p>
</center>
</div>
<div class="gallery">
<div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
<div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
<div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
<div class="img-w"><img src="4.jpg" alt="image" /></div>
<div class="img-w"><img src="5.jpg" alt="image" /></div>
<div class="img-w"><img src="6.jpg" alt="image" /></div>
<div class="img-w"><img src="7.jpg" alt="image" /></div>
<div class="img-w"><img src="sunset.jpg" alt="image" /></div>
<div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>
</div>
</body>
</html>
The answer to this question linking jquery in html shows you how to add JQuery to your HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Please note these are old files and should be replaced with the current versions of JQuery.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('jupiter.jpg');
}
.slide-two {
background-image: url('neptune.jpg');
}
.slide-three {
background-image: url('mars.jpg');
}
.slide-four {
background-image: url('moon.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=" 1 "/>
<link rel="stylesheet " type="text/css " href="main1.css " />
</head>
<body>
<div class="wrap ">
<header>
<label for="slide-1-trigger ">Slide One</label>
<label for="slide-2-trigger ">Slide Two</label>
<label for="slide-3-trigger ">Slide Three</label>
<label for="slide-4-trigger ">Slide Four</label>
</header>
<input id="slide-1-trigger " type="radio " name="slides " checked/>
<section class="slide slide-one ">
<h1>Headline One</h1>
<video width="250 " height="170 " controls>
<source src="jupitergif.webm " type="video/webm ">
</source>
</video>
</section>
<input id="slide-2-trigger " type="radio " name="slides " />
<section class="slide slide-two ">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger " type="radio " name="slides " />
<section class="slide slide-three ">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger " type="radio " name="slides " />
<section class="slide slide-four ">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>
I am having trouble styling the video so that it is in the bottom right corner of the page. Also, how can I make the video autoplay on a loop? Also, how can I get rid of any play/maximize icons on the video? The video is in section class slide slide-one. Much appreciated.
Add autoplay and loop attributes to <video> and remove controls. The <source> void element which doesn't have an end tag </source>
<video width="250" height="170" autoplay loop>
For placing the video in the bottom right corner use:
video {
z-index: 10000;
position:fixed;
bottom:0;
right:0;
}
BTW keep your format consistent all of the right quotes have a space before them, remove those spaces.
SNIPPET
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('https://pbs.twimg.com/profile_images/628266121313947648/Zk_c8qnD.jpg');
}
.slide-two {
background-image: url('https://dperkins.org/gal/2014/thumb/2014-10-06.18.Neptune.jpg');
}
.slide-three {
background-image: url('https://at-cdn-s01.audiotool.com/2011/10/04/documents/FHCjD1iBHjEiCESy8ubgBopVfNr/0/cover256x256-dd1bb728ff564ec69ededd71b2ba4ada.jpg');
}
.slide-four {
background-image: url('https://is5-ssl.mzstatic.com/image/thumb/Purple71/v4/82/42/9a/82429a1b-a489-d421-5ec2-cb38613b54f4/source/256x256bb.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
position:fixed;
bottom:0;
right:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
<label for="slide-4-trigger">Slide Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked/>
<section class="slide slide-one">
<h1>Headline One</h1>
<video width="250" height="170" autoplay loop>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/webm">
</video>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>