Breaking News: Grepper is joining You.com. Read the official announcement!

slides image css

Shiny Skylark answered on February 21, 2022 Popularity 9/10 Helpfulness 2/10

answer slides image css

slides image css

Comment

.img-container{
    width: 60%;
    height: 70vh;
    background-color: rgb(250, 250, 2);
    position: relative;
}
/* image slides start */
.img-container figcaption{
    position: absolute;
    top: 50px;
    padding-left: 60px;
}
#img-one{
    width: 100%;
    height: 70vh;
    position: absolute;
}
#img-two{
    width: 100%;
    height: 70vh;
    position: absolute;
}
#img-three{
    width: 100%;
    height: 70vh;
    position: absolute;
}
/* image slides end */

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css image

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

Shiny Skylark

0 Answers Avg Quality 2/10

Closely Related Answers

css image slideshow

Comment

<div class="carousel">
    <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

<style>
  html, body {
    margin: 0px;
    padding: 0px;
    background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
}

.carousel {
    position: relative;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
    margin-top: 26px;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 100%;
}

.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
}

.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #428bca;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
  </style>

Popularity 10/10 Helpfulness 4/10 Language html

Source: front-end.codes

Tags: carousel carouse

Link to this answer
Share Copy Link

Contributed on Feb 21 2022

Lovely Leopard

0 Answers Avg Quality 2/10

slide css

Comment

//slide down 
.btn:checked ~ .box {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.box {
    width: 350px;
    margin-top: 2em;
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.137);
    transition: all 0.4s;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    box-shadow: 0px 2rem 10px black;
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 23 2022

Malik Amir Hamza

0 Answers Avg Quality 2/10

css slideshow

Comment

#slideset1 {height: 10em; position: relative}

Popularity 10/10 Helpfulness 1/10 Language css

Source: www.w3.org

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 09 2022

Yellowed Yacare

0 Answers Avg Quality 2/10

slides image css

Contents

More Related Answers

slides image css

Closely Related Answers

css image slideshow

slide css

css slideshow

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.