CSS image gallery

Question

CSS image gallery

Navigation

#1 by (1 votes)

1

I'm trying to make a gallery of images for a website, I got a demo that I found on the internet and I'm trying to edit it, but I'd like to modify it so that the images are merged, one left and one right, but not I found a way to do it. Can someone give me a hand? the CSS is too big to send here, but if I need to, I'll send it.

HTML

<!doctypehtml><htmllang="pt-br" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->

    <title>Farol Filmes</title>
</head>
<body>
    <header class="gotham">
        <h1></h1>
    </header>

    <section class="cd-single-item">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected"><img src="img/teste.jpeg" ></li>
                <li><img src="img/img-2.jpg"></li>
                <li><img src="img/img-3.jpg"></li>
            </ul> <!-- cd-slider -->

            <ul class="cd-slider-navigation">
                <li><a href="#0" class="cd-prev inactive">Next</a></li>
                <li><a href="#0" class="cd-next">Prev</a></li>
            </ul> <!-- cd-slider-navigation -->

            <a href="#0" class="cd-close">fechar</a>
        </div> <!-- cd-slider-wrapper -->

        <div class="cd-item-info">
            <h2 class="gotham">Casamento Yo e Gui</h2>

            <p class="gotham-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione.</p>

        </div> <!-- cd-item-info -->
    </section> <!-- cd-single-item -->

    <section class=" gotham-light cd-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem, quisquam veniam sequi in quasi excepturi laudantium fugit nihil odio minima quae consequuntur dolorum pariatur obcaecati, adipisci dignissimos officia saepe itaque deleniti porro odit vitae voluptate. Blanditiis sunt obcaecati corporis, alias adipisci. Eum illum voluptatibus expedita nulla eius provident pariatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem, quisquam veniam sequi in quasi excepturi laudantium fugit nihil odio minima quae consequuntur dolorum pariatur obcaecati, adipisci dignissimos officia saepe itaque deleniti porro odit vitae voluptate.
        </p>
    </section>
    <section class="cd-single-item">
        <div class="cd-slider-wrapper">
            <ul class="cd-slider">
                <li class="selected"><img src="img/teste.jpeg" ></li>
                <li><img src="img/img-2.jpg"></li>
                <li><img src="img/img-3.jpg"></li>
            </ul> <!-- cd-slider -->

            <ul class="cd-slider-navigation">
                <li><a href="#0" class="cd-prev inactive">Next</a></li>
                <li><a href="#0" class="cd-next">Prev</a></li>
            </ul> <!-- cd-slider-navigation -->

            <a href="#0" class="cd-close">fechar</a>
        </div> <!-- cd-slider-wrapper -->

        <div class="cd-item-info">
            <h2 class="gotham">Casamento Yo e Gui</h2>

            <p class="gotham-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione.</p>

        </div> <!-- cd-item-info -->
    </section> <!-- cd-single-item -->

    <section class=" gotham-light cd-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem, quisquam veniam sequi in quasi excepturi laudantium fugit nihil odio minima quae consequuntur dolorum pariatur obcaecati, adipisci dignissimos officia saepe itaque deleniti porro odit vitae voluptate. Blanditiis sunt obcaecati corporis, alias adipisci. Eum illum voluptatibus expedita nulla eius provident pariatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem, quisquam veniam sequi in quasi excepturi laudantium fugit nihil odio minima quae consequuntur dolorum pariatur obcaecati, adipisci dignissimos officia saepe itaque deleniti porro odit vitae voluptate.
        </p>
    </section>

CodyHouse Site - Source

javascript html5 css galeria

asked by anonymous 26.09.2018 / 19:27

1 answer

with transformation [closed] justify-content-center is not centralizing the contents in my bootstrap

score 1 · Accepted Answer

Look to do what you want to type the image below you will have to make some adjustments in CSS, it's a small thing! But they make all the difference. You do not need to tinker with the HTML and the structure or order of the tags, you will solve everything with CSS.

Firstyouhavetokeepinmindthatyouwillusethisonlyforthegalleriesthatyouwanttherightone(yourcustomizedposition).Thencreateaclasstype.diretaandputitinthesectionthatwillhavethegalleryindireita

OBSNote:NotethatinallclassIinclude.cd-single-item.direitabefore.ThisisbecauseIonlywantthisCSSinthissectionthatdeterminedthatthegalleryshouldberight<sectionclass="cd-single-item direita">

I left some comments in CSS to understand where I changed

Follow the CSS:

@media only screen and (min-width: 1024px)
.cd-single-item.direita .cd-slider-wrapper.direita {
    width: 50%;
    margin-left: 50%; /* aqui alinho a galeria a direita */
}
.cd-single-item.direita .cd-slider-wrapper {
    position: relative;
    z-index: 1;
    -webkit-transition: width .4s;
    -moz-transition: width .4s;
    transition: all .4s; /* aqui habilito a animação também para o margin */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: width;
}

@media only screen and (min-width: 1024px)
.cd-single-item.direita .cd-slider-active .cd-slider-wrapper {
    width: 100%;
    margin-left: 0; /* aqui coloco a galeria crescendo para esquerda e não para direita como a original */
}

@media only screen and (min-width: 1024px)
.cd-single-item.direita .cd-item-info {
    position: absolute;
    width: 50%;
    top: 0;
    /* right: 0;  retire o right para jogar o conteúdo para esquerda */
    padding: 60px 60px 0;
    margin: 0;
}