CODEWITHSUNDEEP
htmlcss
Marek
Marek

Reputation: 147

center absolutely positioned <a> to absolutely positioned image

I try to make text that will be centered in the middle of the image, but the problem is that in my attempts I did not succeed to make it with resizing website. Any suggestions how to fix it and what I do wrong?

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}

.imageSlide-container {
    position: relative;
    margin: auto;
}
.imageSlide {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 2.5s;
    -moz-transition: opacity 2.5s;
    -o-transition: opacity 2.5s;
    transition: opacity 2.5s;
}
.showing {
    opacity: 1;
    z-index: 2;
}
            
.prev, .next {
    z-index: 3;
    position: absolute;
    top: 50%;
    width: auto;
    cursor: pointer;
    color: red;
    /*margin-top: -22px;*/
    padding: 15px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;

}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8)
}
@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
<div class="imageSlide-container">
    <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg">
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg">
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg">

    <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a>
    <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

Upvotes: 0

Views: 60

Answers (2)

omer
omer

Reputation: 2623

this is an updated version using your code from the comments below, i added top:0 to .imageSlide and solved the slider dropping the last image issue.

https://jsfiddle.net/k391zyn1/3/

html:

<div class="imageSlide-container">
    <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg">
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg">
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg">

    <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a>
    <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

css:

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}

.imageSlide-container {
    position: relative;
    margin: auto;
}
.imageSlide {
    position: absolute;
    top:0;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 1;

     -webkit-transition: opacity 2.5s;
    -moz-transition: opacity 2.5s;
    -o-t ransition: opacity 2.5s;
    transition: opacity 2.5s;
}
.showing {
    position: static;
    opacity: 1;
    z-index: 2;
}


.prev, .next {
    z-index: 3;
    position: absolute;
    top: 50%;
    width: auto;
    cursor: pointer;
    color: red;
    margin-top: -22px;
    padding: 15px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;

}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8)
}
@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
}

javascript:

  var slides = document.querySelectorAll('.imageSlide');
   var currentSlide = 0;
   var slideInterval = setInterval(nextSlide,3000);

   function nextSlide(){
       slides[currentSlide].className = 'imageSlide';
       currentSlide = (currentSlide+1)%(slides.length);
       console.log('currentSlide',currentSlide);
       slides[currentSlide].className = 'imageSlide showing';
   }

Upvotes: 1

Marek
Marek

Reputation: 147

I solved it with adding position: static to .showing, Because the image you see may not be set to position: absolute, so the code top: 50% in buttons can come from something.

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}

.imageSlide-container {
    position: relative;
    margin: auto;
}
.imageSlide {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 2.5s;
    -moz-transition: opacity 2.5s;
    -o-transition: opacity 2.5s;
    transition: opacity 2.5s;
}
.showing {
    position: static;
    opacity: 1;
    z-index: 2;
}
            
.prev, .next {
    z-index: 3;
    position: absolute;
    top: 50%;
    width: auto;
    cursor: pointer;
    color: red;
    margin-top: -22px;
    padding: 15px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;

}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8)
}
@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
<div class="imageSlide-container">
    <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg">
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg">
    <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg">

    <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a>
    <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

Upvotes: 1

Related Questions