CODEWITHSUNDEEP
htmlcss
Utsav
Utsav

Reputation: 1

Pure CSS image slider

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
margin:0%;
Padding:0%;
}
.wrap{
height:100%;
width:100%;
position:relative;
overflow:hidden;
background:#120103;
color:#fff;
text-align:center;
}
header{
    background:#3E474F;
    box-shadow:0 .5em 1em #111;
    position:absolute;
    z-index:900;
    width:100%;
}
header label{
    color:#788188;
    cursor:pointer;
    display:inline-block;
    line-height:4.25em;
    font-size:.667em;
    font-weight:bold;
    padding:0 1em;
}
header label:hover{
    background:#2e353b;
}

.slide{
    width:100%;
    height: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 .75s;
}


[id^= "slide"]:checked + .slide{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

 img{
     height:250px;
     width:250px;
    Margin:20px;
    Overflow:none;
    display:block;
    }
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.slide-one:hover .overlay{
opacity:0.5;
}

.slide-two:hover .overlay{
opacity:0.5;
}

.slide-three:hover .overlay{
opacity:0.5;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-one{
background-image:url('wow.jpg');
}
.slide-two{
background-image:url('Anonymous.jpg ');
}
.slide-three{
background-image:url('1.jpg');
}
</style>
</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>
</header>
<input id="slide-1-trigger" type="radio" name="slide" checked>
<section class="slide slide-one">

<div class="overlay">
<div class="text">Ethical Hacking is licensed hacking.... <a 
href="https://en.wikipedia.org/wiki/Certified_Ethical_Hacker">Read More</a>
</div>
</div>
</section>
<input id="slide-2-trigger" type="radio" name="slide" >
<section class="slide slide-two" >
<div class='overlay'>
<div class="text">A rather famous group of hackers and tech savvys spread 
across the world....<a 
href="https://en.wikipedia.org/wiki/Anonymous_(group)">Read More</a></div>
</div>
</section>
<input id="slide-3-trigger" type="radio" name="slide" >
<section class="slide slide-three" >
<div class='overlay'>
<div class="text">Just Checking</div>
</div>
</div>
</body>
</html>

Hello everybody , i was watching a video on making a CSS image slider after watching the whole video i wrote the above code but am having some problem understanding this particular piece of code: 

[id^= "slide"]:checked + .slide{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

I need help understanding this part of the code. Thank you for help in advance :)

Upvotes: 0

Views: 350

Answers (2)

Matteo B.
Matteo B.

Reputation: 4074

First off it seems you understand the fundamental principles of CSS but if I am wrong and you do not, I recommend the tutorials of MDN about How CSS works and the Syntax.

So piece by piece...

1. [id^= "slide"]:checked + .slide

This is the selector and consists of two major parts: [id^= "slide"]:checked and .slide, connected by a + sign. I assume that you know what .slide means on its own. If not, you should read the articles that I posted above.

1.1. +

The + operator with the x + y syntax selects all elements that would be selected by pure y but it limits the selection to only those elements directly following other elements which would be selected by x. So if you have .a + .b then you get all elements with the class b directly preceded by elements with the class a:

div {
  border: 1px dashed black;
  padding: 1em;
  margin: 1em;
}

.wupwupwup + .nanana {
  background: red;
}
This selects all .nanana directly after .wupwupwup.
<div class="nanana wupwupwup">This is not selected because there is no .wupwupwup before.</div>
<div class="wupwupwup">This is not selected because it has no .nanana class</div>
<div class="nanana">This is selected because it has .wupwupwup before and itself matches .nanana</div>
<div>This is not selected because it does not match .nanana and also because the previous element does not match .wupwupwup</div>

1.2. [id^="slide"]:checked

This one again consists of two selectors: [id^="slide"] and :checked. :checked is explained very simply: x:checked selects all elements that match x as long as they are "checked". An element is "checked" for example if it is a checkbox or radio button and is checked. So we now need to examine the x in this case [id^="slide"]. That is a selector which selects all elements which have an attribute id which starts with slide. So it would select all elements with ids like slide, slide-1-trigger, slide-2-trigger, slider, and so on.

So what the whole [id^= "slide"]:checked + .slide does can be explained like this: It selects all elements with the class slide that directly follow a "checked" element with an ID that begins with slide.

In your case ...

... this means, that for example the element <section class="slide slide-one"> after a checked <input id="slide-1-trigger" type="radio" name="slide" checked> will be selected.

2. The rules

{
    left:0;
    z-index:100;
    transition:left .65s ease-out;
}

First off: You can read about transitions on MDN. What your transition basically does is: Make the change of the property left to the value 0 smooth for 0.65 seconds. While it does this, it subtly uses a special easing function called ease-out but you can omit that probably without noticeable differences. The z-index of 100 makes this current slide the top-most so that it is not hidden behind the other slides.

Another thing ...

... that you may have missed: The <label ...> elements that you use will mark the corresponding <input ...> elements as checked if you click on the labels. That is why their state changes and then the :checked selector takes effect.

Upvotes: 1

Wilson Wang
Wilson Wang

Reputation: 1

:checked is a CSS pseudo-class selector that represents any radio, checkbox or option that has been checked/clicked. That segment of CSS is just targeting any id of slide-trigger and performing a transition left when the :checked pseudo-class is active. I hope that was helpful

Upvotes: 0

Related Questions