/    Sign up×
Community /Pin to ProfileBookmark

Need help with images

Copy linkTweet thisAlerts:
Feb 17.2020

Hello! I have next problem. I want when image is in hover, some color appears. I did it, but what happened. This color is a little over image. You can see on image.[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-02-17/1581940661-708508-problem.jpeg]
I want if image is 300×300, color also would be 300×300, not 320×300.
HTML

`<div class=”container-overlay”>

<img src=”kuhinja-portfolio.jpg” alt=”kitchen” class=”image”>
<div class=”overlay overlayLeft”>
<div class=”textt”>See more</div>
</div>

</div>

<div class=”container-overlay”>

<img src=”kupatilo portfolio.jpg” alt=”kitchen” class=”image”>
<div class=”overlay overlayFade”>
<div class=”textt”><a href=”kitchen.html” target=”_blank” class=”link”>See more</a></div>
</div>

</div>

<div class=”container-overlay”>

<img src=”livingroom portfolio.jpg” alt=”kitchen” class=”image”>
<div class=”overlay overlayFade”>
<div class=”textt”><a href=”kitchen.html” target=”_blank” class=”link”>See more</a></div>
</div>

</div>

<div class=”container-overlay”>

<img src=”bedroom porfolio.jpg” alt=”kitchen” class=”image”>
<div class=”overlay overlayFade”>
<div class=”textt”><a href=”kitchen.html” target=”_blank” class=”link”>See more</a></div>
</div>

</div>

</div>`

CSS

.images-gallery {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 4% auto ;
}

.images-gallery .container-overlay {
flex-basis: 25%;
}

.images-gallery .container-overlay img {
display: block;
margin: 0 auto;
}

.container-overlay {
position: relative;
width: 350px;
height: 240px;
display: inline-block;
}

.image {
display: block;
}
.overlay {
position: absolute;
transition: all 1s ease;
opacity: 0;
background-color: #eee;
}

.container-overlay:hover .overlay {
opacity: 1;
}

.textt {
color: white;
font-family: sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 20px;
}

.overlayLeft {
height: 100%;
width: 0;
top: 0;
left: 0;
background-color: #00b1ba;
}

.container-overlay:hover .overlayLeft {
width: 100%;
}
.overlayFade {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #f7a145b5;
}

I am pretty sure the problem is in this line .images-gallery .container-overlay {
flex-basis: 25%;
}
but I don’t have idea how to fix it. I tried on many ways, but it wasn’t successfull.
When I remove display:flex, my images are not responsive, so I don’t have idea how to fix it, and I really need it as soon as possible.
I hope somebody will know how to fix this problem. Thanks once more

to post a comment
CSS

55 Comments(s) ↴

Copy linkTweet thisAlerts:
@VITSUSAFeb 18.2020 — Define the color which you want in hover. Currently you have define existing color.
Copy linkTweet thisAlerts:
@Hera-CoderauthorFeb 18.2020 — I am not sure I understand You. I just want to know how to make color would be over the image, but like I said, if image is 300x300, color also have to be 300x300, not 320x300. I know the problem is in .images-gallery .container-overlay {

flex-basis: 25%;

}

because, when I remove this line, it working, but then there are not margins between images, and image are not responsive. I really need this ASAP.
Copy linkTweet thisAlerts:
@SempervivumFeb 18.2020 — I appied several modification to your code:
  • - Do not use flex-basis without flex-shrink and flex-grow

  • - Leave it up to flex layout to set the size, don't use absolute measurements like 350px.

    This code works fine for me:
    &lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;

    &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;style&gt;
    .images-gallery {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 4% auto;
    }

    <i> </i> .images-gallery .container-overlay img {
    <i> </i> display: block;
    <i> </i> margin: 0 auto;
    <i> </i> }

    <i> </i> .container-overlay {
    <i> </i> position: relative;
    <i> </i> /* width: 350px;
    <i> </i> height: 240px; */
    <i> </i> display: inline-block;
    <i> </i> }

    <i> </i> .image {
    <i> </i> width: 100%;
    <i> </i> display: block;
    <i> </i> }

    <i> </i> .overlay {
    <i> </i> position: absolute;
    <i> </i> transition: all 1s ease;
    <i> </i> opacity: 0;
    <i> </i> background-color: #eee;
    <i> </i> }

    <i> </i> .container-overlay:hover .overlay {
    <i> </i> opacity: 1;
    <i> </i> }

    <i> </i> .textt {
    <i> </i> color: white;
    <i> </i> font-family: sans-serif;
    <i> </i> position: absolute;
    <i> </i> top: 50%;
    <i> </i> left: 50%;
    <i> </i> transform: translate(-50%, -50%);
    <i> </i> font-size: 20px;
    <i> </i> }

    <i> </i> .overlayLeft {
    <i> </i> height: 100%;
    <i> </i> width: 0;
    <i> </i> top: 0;
    <i> </i> left: 0;
    <i> </i> background-color: #00b1ba;
    <i> </i> }

    <i> </i> .container-overlay:hover .overlayLeft {
    <i> </i> width: 100%;
    <i> </i> }

    <i> </i> .overlayFade {
    <i> </i> width: 100%;
    <i> </i> height: 100%;
    <i> </i> top: 0;
    <i> </i> left: 0;
    <i> </i> background-color: #f7a145b5;
    <i> </i> }

    <i> </i> .images-gallery .container-overlay {
    <i> </i> flex: 1;
    <i> </i> margin-left: 0.5em;
    <i> </i> margin-right: 0.5em;
    <i> </i> }
    <i> </i>&lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;div class="images-gallery"&gt;
    &lt;div class="container-overlay"&gt;

    <i> </i> &lt;img src="images/dia0.jpg" alt="kitchen" class="image"&gt;
    <i> </i> &lt;div class="overlay overlayLeft"&gt;
    <i> </i> &lt;div class="textt"&gt;See more&lt;/div&gt;
    <i> </i> &lt;/div&gt;

    <i> </i> &lt;/div&gt;

    <i> </i> &lt;div class="container-overlay"&gt;

    <i> </i> &lt;img src="images/dia1.jpg" alt="kitchen" class="image"&gt;
    <i> </i> &lt;div class="overlay overlayFade"&gt;
    <i> </i> &lt;div class="textt"&gt;&lt;a href="kitchen.html" target="_blank" class="link"&gt;See more&lt;/a&gt;&lt;/div&gt;
    <i> </i> &lt;/div&gt;

    <i> </i> &lt;/div&gt;

    <i> </i> &lt;div class="container-overlay"&gt;

    <i> </i> &lt;img src="images/dia2.jpg" alt="kitchen" class="image"&gt;
    <i> </i> &lt;div class="overlay overlayFade"&gt;
    <i> </i> &lt;div class="textt"&gt;&lt;a href="kitchen.html" target="_blank" class="link"&gt;See more&lt;/a&gt;&lt;/div&gt;
    <i> </i> &lt;/div&gt;

    <i> </i> &lt;/div&gt;

    <i> </i> &lt;div class="container-overlay"&gt;

    <i> </i> &lt;img src="images/dia3.jpg" alt="kitchen" class="image"&gt;
    <i> </i> &lt;div class="overlay overlayFade"&gt;
    <i> </i> &lt;div class="textt"&gt;&lt;a href="kitchen.html" target="_blank" class="link"&gt;See more&lt;/a&gt;&lt;/div&gt;
    <i> </i> &lt;/div&gt;

    <i> </i> &lt;/div&gt;

    <i> </i>&lt;/div&gt;

    &lt;/body&gt;

    &lt;/html&gt;

    Additional recommendation: Use figure tags instead of divs.
    • Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 18.2020 — Thanks Sempervivum. You definitely save me :D. It was really nightmare, but, there are always somebody who save you. In my case, it's You. Thanks once more.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 18.2020 — I have one more problem, and it's I would say BIG FINAL for me :D. If You could help me, it really would help me a lot. Thanks once more
    Copy linkTweet thisAlerts:
    @SempervivumFeb 18.2020 — Tell, what's that problem?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 18.2020 — First of all, thank You very much on help. Well, my problem is image slider. What exactly? I make one website, and I have image slider on this site. What I want? I want something like on this website https://beslagicinterijer.eu/.

    So, for example, I have 3 images in slider, and after 5 seconds, other image in slider appears. I want when image appears, it would be "normal" image, and after 1 or 2 seconds, some black opacity will appear, and some text will appear. This should happen in all images. I mayble little complicated this explanation, but I think, it will be the best to see website, which I posted above. That's exactly what I want. Thanks once more :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 18.2020 — I remember that you had another thread regarding the slider. The slider in your link features a Kenburnes effect. Is this required by you? Did you already try a slider?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 18.2020 — My slider also have Kenburn effect, that's ok. But, like I said, I just want that after 1 or 2 second after image appear, some black opacity appear and in that moment also some text appear. That's all I want. I tried on many ways, but it was unsuccessful.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 18.2020 — Cycle2 features animated captions but not exactly the style of your example link:

    http://jquery.malsup.com/cycle2/demo/caption2.php

    Check if this would be sufficient for you.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 19.2020 — I used this Codepen:

    https://codepen.io/curtisfleming/pen/pEzjWP

    and the API of Cycle2 and made this:
    &lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;

    &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;style&gt;
    /* CSS for Ken Burns */

    <i> </i> .cycle-slideshow {
    <i> </i> max-width: 980px;
    <i> </i> overflow: hidden;
    <i> </i> }

    <i> </i> .cycle-slideshow img {
    <i> </i> width: 100%;
    <i> </i> height: auto;
    <i> </i> transition: transform 8s linear;
    <i> </i> }

    <i> </i> .cycle-slideshow .scale {
    <i> </i> transform: scale(1.1);
    <i> </i> }

    <i> </i> .cycle-slideshow .fx1 {
    <i> </i> transform-origin: bottom left;
    <i> </i> }

    <i> </i> .cycle-slideshow .fx2 {
    <i> </i> transform-origin: top left;
    <i> </i> }

    <i> </i> .cycle-slideshow .fx3 {
    <i> </i> transform-origin: top right;
    <i> </i> }

    <i> </i> .cycle-slideshow .fx4 {
    <i> </i> transform-origin: bottom right;
    <i> </i> }
    <i> </i>&lt;/style&gt;
    <i> </i>&lt;style&gt;
    <i> </i> /* CSS for captions */

    <i> </i> .ovl-caption {
    <i> </i> width: 100%;
    <i> </i> text-align: center;
    <i> </i> position: absolute;
    <i> </i> z-index: 901;
    <i> </i> left: 0;
    <i> </i> transform: translateY(-50%);
    <i> </i> overflow: hidden;
    <i> </i> }

    <i> </i> .ovl1 {
    <i> </i> top: 30%;
    <i> </i> }

    <i> </i> .ovl2 {
    <i> </i> top: 50%;
    <i> </i> }

    <i> </i> .caption {
    <i> </i> display: inline-block;
    <i> </i> padding: 0.2rem 0.5rem;
    <i> </i> color: white;
    <i> </i> font-size: 2rem;
    <i> </i> transform: translateY(100%);
    <i> </i> transition: transform 0.5s;
    <i> </i> }

    <i> </i> .ovl2 .caption {
    <i> </i> transition-delay: 0.2s;
    <i> </i> }

    <i> </i> .caption.up {
    <i> </i> transform: translateY(0);
    <i> </i> }

    <i> </i> .ovlbg {
    <i> </i> width: 100%;
    <i> </i> height: 100%;
    <i> </i> text-align: center;
    <i> </i> position: absolute;
    <i> </i> z-index: 900;
    <i> </i> left: 0;
    <i> </i> top: 0;
    <i> </i> background-color: black;
    <i> </i> opacity: 0;
    <i> </i> transition: opacity 0.5s;
    <i> </i> }

    <i> </i> .ovlbg.on {
    <i> </i> opacity: 0.7;
    <i> </i> }
    <i> </i>&lt;/style&gt;
    <i> </i>&lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"
    <i> </i> integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"&gt;&lt;/script&gt;
    <i> </i>&lt;script src="js/jquery.cycle2.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;div class="cycle-slideshow" data-cycle-timeout="8000"&gt;
    &lt;img src="images/01.png" data-caption1="Caption 1.1" data-caption2="Caption 2.1"&gt;
    &lt;img src="images/02.png" data-caption1="Caption 1.2" data-caption2="Caption 2.2"&gt;
    &lt;img src="images/03.png" data-caption1="Caption 1.3" data-caption2="Caption 2.3"&gt;
    &lt;img src="images/04.png" data-caption1="Caption 1.4" data-caption2="Caption 2.4"&gt;
    &lt;!-- Overlays for captions --&gt;
    &lt;div class="ovlbg"&gt;&lt;/div&gt; &lt;!-- darkens the image --&gt;
    &lt;div class="ovl-caption ovl1"&gt;&lt;span class="caption"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="ovl-caption ovl2"&gt;&lt;span class="caption"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
    // Javascript for Ken Burns

    <i> </i> var new_effect;
    <i> </i> var old_effect;

    <i> </i> function random_effect() {
    <i> </i> return Math.floor(Math.random() * 4) + 1;
    <i> </i> }

    <i> </i> new_effect = random_effect();
    <i> </i> $('.cycle-slideshow').on('cycle-initialized', function () {
    <i> </i> $('.cycle-slideshow img:first-of-type').addClass('scale');
    <i> </i> $('.cycle-slideshow img:first-of-type').addClass('fx' + new_effect);

    <i> </i> $('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    <i> </i> old_effect = new_effect;
    <i> </i> new_effect = random_effect();
    <i> </i> $(incomingSlideEl).addClass('scale');
    <i> </i> $(incomingSlideEl).addClass('fx' + new_effect);
    <i> </i> });

    <i> </i> $('.cycle-slideshow').on('cycle-after', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    <i> </i> $(outgoingSlideEl).removeClass('scale');
    <i> </i> $(outgoingSlideEl).removeClass('fx' + old_effect);
    <i> </i> });
    <i> </i> });
    <i> </i>&lt;/script&gt;
    <i> </i>&lt;script&gt;
    <i> </i> // Javascript for captions

    <i> </i> const delay = 3000; // delay after which the captions appear
    <i> </i> const caption1 = $('.ovl1 .caption');
    <i> </i> const caption2 = $('.ovl2 .caption');
    <i> </i> const ovlbg = $('.ovlbg');
    <i> </i> function captionUp(slide) {
    <i> </i> setTimeout(function () {
    <i> </i> caption1.text(slide.attr('data-caption1'));
    <i> </i> caption1.addClass('up');
    <i> </i> caption2.text(slide.attr('data-caption2'));
    <i> </i> caption2.addClass('up');
    <i> </i> ovlbg.addClass('on');
    <i> </i> }, delay);
    <i> </i> }
    <i> </i> captionUp($('.cycle-slideshow img:first-child'));
    <i> </i> $('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    <i> </i> caption1.removeClass('up');
    <i> </i> caption2.removeClass('up');
    <i> </i> ovlbg.removeClass('on');
    <i> </i> captionUp($(incomingSlideEl));
    <i> </i> });

    <i> </i>&lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;    Check if it fits your needs.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 19.2020 — Thank You on Your effort, but unfortunately, that's not what I need. Anyway, thank You a lot of. You really helped me. I hope there will be somebody who would know how to do what I want. It's really important for me. Thanks once more :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 19.2020 — :(

    What's missing or what's different from the example in the link you posted?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 19.2020 — Maybe in my browser it not work like it should be, but when I seen Your example, first of all, it's not slider. There is just one image, You can't click on left or right line, because they don't exist. Howewer, it's not problem, I have functional image slider with Kenburn effect. All what I need is like I said, I want that this happening on every image in slider. When image appear, it would be "normal" image, and after 1 or 2 second, black opacity will appear, and some text will appear. That's all I need. So, I have image slider, but I don't have black opacity and text.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 19.2020 — That's a minor issue. Cycle 2 supports prev/next buttons, they can be switched on easily by configuration:

    http://jquery.malsup.com/cycle2/demo/prevnext.php
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 19.2020 — Ok, that's alright. But. like I said, there are no problems with slider. I have slider already and it works. I just need to know how to put black oapcity and text, like I said in previous posts.
    Copy linkTweet thisAlerts:
    @coininfoexchange123Feb 20.2020 — I APPRECIATE WITH YOU

    but this will be better

    keep sharing your ideas

    coinbase support number

    https://www.coininfoexchange.com/coinbase-phone-number/
    Copy linkTweet thisAlerts:
    @SempervivumFeb 20.2020 — Do I remember correctly? The slideshow you are currently using is Wowslider?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 21.2020 — Yes, You're right. I am using Wowslider.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 21.2020 — I viewed the website of Wowslider and didn't find any information about an API. However an API is necessary when adding custom features like the the animated captions. Therefore Wowslider is not suitable for your requirements.

    This is a common disadvantage of such WYSIWYG stuff: It's easy to handle without knowledge about coding but there are limitations when adjustments or extensions are necessary.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 21.2020 — Well. I have to admit, I don't like so much this slider, I don't know why, but on some way, I don't like it. Do You maybe have some example of slider which I want, with opacity and text animation. I would remove WOW slider from my site. if I found other slider with these features.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 21.2020 — I recommend Cycle2 as posted above. It has a sufficient API and supports swiping on mobile devices. Have a look at this demo:

    https://webentwicklung.ulrichbangert.de/cycle2-kenburns-custom-captions.html

    prev/next buttons can be added easily.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 21.2020 — Well, it looks like something what I need. Do You maybe have codepen of this code somewhere? Thank You :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 21.2020 — You can easily view the code of the demo by rightclick - "View page source".
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 21.2020 — Yeah, I forgot it :D. Thank You, I will try to do it. I hope it will work :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 21.2020 — When you think this slideshow is OK for you I'm going to add the next/prev arrows.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — First of all, thank You, it looks good. I just have one question for You. Data-caption1 and data-caption2 are something what hold text. What's the problem? In CSS, there is class "caption" and when I change something on this class, both caption1 and caption 2 are changing and it makes problem to me. For example, I want that data-caption1 have font-size : 50px, and data-caption2 have font-size : 30px. I don't have idea how to do it, and is this possible to do in this code. I have one more question, but I think it would be good to first fix this problem, if it is possible. Thank You once more :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — That's easy to fix. The captions are defined by this HTML:
    &lt;div class="ovl-caption ovl1"&gt;&lt;span class="caption"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="ovl-caption ovl2"&gt;&lt;span class="caption"&gt;&lt;/span&gt;&lt;/div&gt;

    The wrapping divs have individual classes already. Thus you can style the captions individually:
    .ovlcaption.ovl1 span {
    font-size: 50px;
    }
    .ovlcaption.ovl2 span {
    font-size: 30px;
    }
    Alternatively you might assign individual classes to the spans, this would shorten the selectors a bit.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — I just tried it, but that's not work
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — I see, forgot the "-" in the class, this is tested now and should work:
    .ovl-caption.ovl1 span {
    font-size: 50px;
    }

    <i> </i> .ovl-caption.ovl2 span {
    <i> </i> font-size: 30px;
    <i> </i> }
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — Thats' right in center :D. Thank You, You really helped me. I really appreciate it. I have other question for You, Do You know, is possible to make button in this slider. For example. I want in slider appear some text, and under this text, there will be some button, or more buttons. Is this possible to do?
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — I assume that you don't mean the prev/next buttons?

    Should this button be part of a caption, i. e. individual for each slide and included in animation of the caption?

    Or independent of caption and visible above all slides?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — No no. I don't think on prev/next buttons, I thought on button, like for example, "About us", and when somebody click on this button, it will drop down on about section. Something like this.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — Please answer my additional question: Should the button be constant or slide specific?

    Unfortunately I do not understand this:

    " it will drop down on about section"

    Do you mean it shoul open a popup or modal? Or slide to a specific section on the page?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — And I forgot to say. this button/buttons would appear in the same time, when text appear.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — "this button/buttons would appear in the same time, when text appear." Now I understand, should be something like an additional caption.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — @Sempervivum#1615153 This button will be under the text, and when somebody click on this button, it will slide to specific section on the page, this button would be anchor link. I hope You understand now.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — Yes, now I understand. One question left: I assume this should be slide specific, i. e. for each slide or image, clicking the button would slide to a different section?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — Well, I imagined it would be something like this. Image slider have 3 images. On every image, there would be this button/buttons. I am not sure would it slide to different section, but it would probably be like You said. For example, if there are two buttons, when someone click on first button, it will slide to "about" section, and when someone click on second button, it will slide to some other section, for example, on "contact" section. I hope I explained it on good way :D If You don't understand something, I am here :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — Two buttons on one slide or

    slide1 - 1 button leading to "about"

    slide2 - 1 button leading to "contact"

    and so on?
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — Well, I didn't decide finally, but I think it could be good like You said. slide1 - 1 button to about, slide2 - 1 button to contact
    Copy linkTweet thisAlerts:
    @SempervivumFeb 23.2020 — OK, should be fairly easy to code but will take some time. I'm going to implement it.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 23.2020 — Thank You, You can't imagine how this help mens to me. I am young developer who wants to success in this job, and every help means a lot of for me. Thank You once more 😃
    Copy linkTweet thisAlerts:
    @SempervivumFeb 24.2020 — Hi, I extended the demo like this:

    https://webentwicklung.ulrichbangert.de/cycle2-kenburns-custom-captions-buttons.html

    Hope you like it.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 25.2020 — I tried Your demo, and I can say it works good. Thank You very much. But, I have one problem. I have some bootstrap CSS in CSS file, and this bootstrap make me problem. What is the problem? In Your example, evertything works perfect, but like I said, because of my bootstrap, something is not OK. When opacity and text appears, then button appears. And while there are not text and opacity, You can't see button, and that's great. But in my case, You can see part of button, even when there are no opacity and text. I maybe didn't explain it on good way, but I hope, You will understand me. You can see picture, and I hope this will help You to understand what is the problem.[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-02-25/1582651108-66482-problem.png]

    You can see this red line, I changed little CSS, because You will better see red color. So, this red color is button, and You can see this part of button, even when there are no opacity and text, and that's my problem. Like I said, I think problem is in bootstrap CSS, because when I remove bootstrap code, evertything works like I want, but then, I have problem with other section on my page. I hope You will understand me. I am here, in case You would not understand something.

    Thank You once more :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 25.2020 — Yes, I understand you well. I suspect you are using bootstrap for styling the button. If so, please post the class(es) you applied to the button and the bootstrap version you are using.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 25.2020 — Yes, there are some sttyling for button in bootstrap. I just don't have idea how to post bootstrap code, because there are a lot of code. I should find good way to post this code somewhere where it would be examined.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 25.2020 — No, you don't need to post bootstrap code. Just the version you are using and the class(es) you applied to the button.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 25.2020 — I know what You said, I understand, but I don't know which version of bootstrap it is, because this bootstrap is used for some section on the page. It's not full bootstrap CSS file, it's just some part of bootstrap code in CSS file. I will try to forward this code to You on some way.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 25.2020 — It looks I finally found what I need. I think it is bootstap which I used.

    https://github.com/hakikz/bootstrap-4-carousel/blob/master/Free-Bootstrap-Carousel/slider-testimonial/index.html

    https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css
    Copy linkTweet thisAlerts:
    @SempervivumFeb 25.2020 — I included that bootstrap and had the same error. Can be fixed by increasing the amount of translate:
    &lt;style&gt;
    /* CSS for buttons */
    .ovl-caption.btn {
    top: 70%;
    transform: translateY(-50%);
    }

    <i> </i> .ovl-caption.btn button {
    <i> </i> transition: transform 0.5s;
    <i> </i> transition-delay: 0.4s;
    <i> </i> transform: translateY(125%);
    <i> </i> }

    <i> </i> .ovl-caption.btn button.up {
    <i> </i> transform: translateY(0);
    <i> </i> }
    <i> </i>&lt;/style&gt;
    If it doesn't work for you, you can modify the value of 125%.

    In order to make the button invisible at page load too, I had to add some placeholder text to it:

    ` &lt;div class="ovl-caption btn"&gt;&lt;button&gt;Button&lt;/button&gt;&lt;/div&gt;`

    This can be any text as it is not visible at first.
    Copy linkTweet thisAlerts:
    @siorasurgicalsFeb 26.2020 — Yes, and I understand what exactly you want to say. Lots of peoples already faced the issue. I would request you to visit the link that can help you and after you will be able to know, How to solve the issue.

    https://www.siiora.lk/ (An Orthopedic Implants Company)
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 26.2020 — Thank You, I can't describe with words how much You helped me :D. Thats'it. Can You just add prev/next buttons now? Thank You once more :D
    Copy linkTweet thisAlerts:
    @SempervivumFeb 26.2020 — The HTML for th prev/next buttons is already there. I made this CSS to make them visible:
    &lt;style&gt;
    /* CSS for back/next buttons */

    <i> </i> .cycle-prev,
    <i> </i> .cycle-next {
    <i> </i> width: 4rem;
    <i> </i> height: 4rem;
    <i> </i> /* border: 0.2rem solid lightgrey; */
    <i> </i> border-radius: 50%;
    <i> </i> background-color: rgba(127, 127, 127, 0.3);
    <i> </i> position: absolute;
    <i> </i> top: 50%;
    <i> </i> transform: translateY(-50%);
    <i> </i> display: flex;
    <i> </i> justify-content: center;
    <i> </i> align-items: center;
    <i> </i> z-index: 999;
    <i> </i> }


    <i> </i> .cycle-prev::before,
    <i> </i> .cycle-next::before {

    <i> </i> width: 4rem;
    <i> </i> height: 4rem;
    <i> </i> color: white;
    <i> </i> font-size: 2rem;
    <i> </i> display: flex;
    <i> </i> justify-content: center;
    <i> </i> align-items: center;
    <i> </i> }

    <i> </i> .cycle-prev {
    <i> </i> left: 0;
    <i> </i> }

    <i> </i> .cycle-prev::before {
    <i> </i> content: "3008";
    <i> </i> transform: translateX(-0.2rem);
    <i> </i> }

    <i> </i> .cycle-next {
    <i> </i> right: 0;
    <i> </i> }

    <i> </i> .cycle-next::before {
    <i> </i> content: "3009";
    <i> </i> transform: translateX(0.2rem);
    <i> </i> }
    <i> </i>&lt;/style&gt;

    I used unicode characters in order to display the arrows but you can replace them by images easily. Or style them differently, add some hover etc.
    Copy linkTweet thisAlerts:
    @Hera-CoderauthorFeb 28.2020 — I'm sorry because I forgot to thank You. You definitely saved me. Thank You, You really helped me a lot of. I wish You all the best. I hope one day, I would also help to somebody. Thanks once more :D
    ×

    Success!

    Help @Hera-Coder spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...