<div id="readability-page-1" class="page"><div>
                <div id="SE-a5528e27-5a83-44bd-85ad-8928a81a8efa">
                            <blockquote>
                                <div><p id="SE-f3b12933-1feb-41c5-8c17-91fa2efa7735"><span id="SE-e86964c5-5e0d-4253-853e-85ac2d6d7c06">[Web] Pure CSS Simple Slider </span></p><p id="SE-624bc14e-6851-4b7e-ae81-40cc840a55b7"><span id="SE-c8d0f613-1441-484d-89fb-a84c3ab96a45">- Capture Effect Slider</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-6acb6835-719a-4758-bac7-842f83dc7c94">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-6acb6835-719a-4758-bac7-842f83dc7c94&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDEwMzBfODcg/MDAxNjA0MDQ2OTc4NjQw.AmOD-nLkQKbSPfVm1rTDCew-KWPCTqb65fXYISDWCH0g.p-OIR95N8vkauG1jgpHnE6o5SGPwhUirRbj8dH1RmqIg.GIF.backsajang420/capture-effect-slider.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMzBfODcg/MDAxNjA0MDQ2OTc4NjQw.AmOD-nLkQKbSPfVm1rTDCew-KWPCTqb65fXYISDWCH0g.p-OIR95N8vkauG1jgpHnE6o5SGPwhUirRbj8dH1RmqIg.GIF.backsajang420/capture-effect-slider.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMzBfODcg/MDAxNjA0MDQ2OTc4NjQw.AmOD-nLkQKbSPfVm1rTDCew-KWPCTqb65fXYISDWCH0g.p-OIR95N8vkauG1jgpHnE6o5SGPwhUirRbj8dH1RmqIg.GIF.backsajang420/capture-effect-slider.gif?type=w800" data-width="693" data-height="574" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-c6f23efc-7aa2-41d5-8c08-5b9949e27319">
                                    <p>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;title&gt;Capture Effect Slider&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class="slider"&gt;
    &lt;input type="radio" name="slider"&gt;
    &lt;div class="imgBox"&gt;
      &lt;img src="./image/bg1.jpg" alt="_"&gt;
      &lt;div class="content"&gt;
        &lt;h2&gt;Slide One&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
          optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
          praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
        &lt;/p&gt;
        &lt;a href="#"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="radio" name="slider"&gt;
    &lt;div class="imgBox"&gt;
      &lt;img src="./image/bg2.jpg" alt="_"&gt;
      &lt;div class="content"&gt;
        &lt;h2&gt;Slide Two&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
          optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
          praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
        &lt;/p&gt;
        &lt;a href="#"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="radio" name="slider"&gt;
    &lt;div class="imgBox"&gt;
      &lt;img src="./image/bg3.jpg" alt="_"&gt;
      &lt;div class="content"&gt;
        &lt;h2&gt;Slide Three&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
          optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
          praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
        &lt;/p&gt;
        &lt;a href="#"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="radio" name="slider"&gt;
    &lt;div class="imgBox"&gt;
      &lt;img src="./image/bg4.jpg" alt="_"&gt;
      &lt;div class="content"&gt;
        &lt;h2&gt;Slide Four&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
          optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
          praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
        &lt;/p&gt;
        &lt;a href="#"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="radio" name="slider" checked&gt;
    &lt;div class="imgBox"&gt;
      &lt;img src="./image/bg5.jpg" alt="_"&gt;
      &lt;div class="content"&gt;
        &lt;h2&gt;Slide Five&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam velit porro rem temporibus ratione quas facilis
          optio perferendis cupiditate laboriosam? Fugit exercitationem laborum vitae quos at rem dignissimos
          praesentium, aperiam aliquam, dolorum amet earum optio iure. Nesciunt distinctio facere culpa.
        &lt;/p&gt;
        &lt;a href="#"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</p>
                                </div>                                <div id="SE-9d3b72d9-ef7c-4916-9790-0f426eb14f9a">
                                    <p>@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800&amp;display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #111;
}

.slider {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #000;
}
.slider .imgBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  transition-delay: 0s;
  z-index: 1;
  clip-path: circle(0px at center);
}
.slider input[type="radio"]:checked + .imgBox {
  z-index: 10;
  clip-path: circle(1000px at center);
  transition-delay: 0.75s;
}
.slider .imgBox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider .imgBox .content {
  position: relative;
  text-align: center;
  max-width: 800px;
}
.slider .imgBox .content h2 {
  font-size: 6em;
  line-height: 1em;
  color: #ffc371;
}
.slider .imgBox .content p {
  font-size: 1.1em;
  color: #ff5f6d;
}
.slider .imgBox .content a {
  position: relative;
  display: inline-block;
  background: #ffafbd;
  padding: 10px 30px;
  color: #8e2de2;
  font-weight: 500;
  margin-top: 20px;
  text-decoration: none;
}
.slider input[type="radio"] {
  position: relative;
  z-index: 1000;
  margin: 5px;
  margin-bottom: 40px;
  outline: none;
  cursor: pointer;
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

[Web] Pure CSS Simple Slider - Capture Effect Slider index.html style.css [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling

[Web] Pure CSS Simple Slider - Capture Effect Slider

댓글