Exclusive CSS banner slider glitch - Hyperlinked images unresponsive

.zd-slider { position:relative; overflow:hidden; margin-top: 0px; }
.zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}

/* Set the width/height of the slideshow */
.zd-slider img#blank {display:block; width:100%; visibility:hidden;}

/* The slideshow */
.zd-slider #img_01 {-webkit-animation:autoplay 9s linear infinite 0s; animation:autoplay 9s linear infinite 0s;}
.zd-slider #img_02 {-webkit-animation:autoplay 9s linear infinite 3s; animation:autoplay 9s linear infinite 3s;}
.zd-slider #img_03 {-webkit-animation:autoplay 9s linear infinite 6s; animation:autoplay 9s linear infinite 6s; }


@-webkit-keyframes autoplay {
4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
}


@keyframes autoplay {
4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
}

/* The slide timing indicator */
.zd-slider #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.5); 
-webkit-animation:slide 3s linear infinite; animation:slide linear 3s infinite;}

@keyframes slide {
0% {left:-100px;}
100% {left:100%;}
}
@-webkit-keyframes slide {
0% {left:-100px;}
100% {left:100%;}
}
<div class="zd-container" id="zd-collection2"> <div class="zd-slider">

<img id="blank" src="http://via.placeholder.com/1440x133" alt="" /> 
  
<img id="img_01" src="http://via.placeholder.com/1440x133" alt="" /> 
  
<a href="http://www.google.com">
<img id="img_02" src="http://via.placeholder.com/1440x133" alt="" /></a>
  
<img id="img_03" src="http://via.placeholder.com/1440x133" alt="" /> <div id="slide"></div> </div> </div>

I am utilizing this specific slideshow design to showcase banners on an eBay store listing. My objective is for the slides to link to various pages within the store. However, I have attempted adding a hyperlink in the traditional manner (referencing "img_02") without any success in making the slide clickable. Despite exploring similar queries and trying out various supposed solutions, none have been effective in resolving this issue. Any guidance on how to address this matter would be greatly appreciated.

htmlcsscss-animationskeyframe

Answer №1

It appears that there may be a z-index issue due to the absolute positioning of your image, causing your link to not have any height.

In order to address this, I have enclosed your images within spans and positioned them instead of the images themselves (maintaining the same class as the anchor for proper positioning), while also adjusting the z-index values in your animation (as noted in the code).

.zd-slider {
  position: relative;
  overflow: hidden;
  margin-top: 0px;
}

.zd-slider .container { /* adjust this to new container span / link */
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.zd-slider img {
  display: block;
  width: 100%;
}

/* set slideshow dimensions */

.zd-slider #blank {
  visibility: hidden;
  pointer-events: none; /* Added as precaution */
}

/* slideshow animations */

.zd-slider #img_01 {
  -webkit-animation: autoplay 9s linear infinite 0s;
  animation: autoplay 9s linear infinite 0s;
}

.zd-slider #img_02 {
  -webkit-animation: autoplay 9s linear infinite 3s;
  animation: autoplay 9s linear infinite 3s;
}

.zd-slider #img_03 {
  -webkit-animation: autoplay 9s linear infinite 6s;
  animation: autoplay 9s linear infinite 6s;
}

@-webkit-keyframes autoplay {
  4%,
  33% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 2; /* Ensure visible item has higher z-index */
  }
  0%,
  37%,
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    z-index: 1; 
  }
}

@keyframes autoplay {
  4%,
  33% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 2; 
  }
  0%,
  37%,
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    ] z-index: 1;
  }
}

/* slide timing indicator styling */

.zd-slider #slide {
  width: 98px;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-animation: slide 3s linear infinite;
  animation: slide linear 3s infinite;
  z-index: 3; /* Position slider above images */
}

@keyframes slide {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}

@-webkit-keyframes slide {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}
<div class="zd-container" id="zd-collection2">
  <div class="zd-slider">

    <!-- remove container class from sizing div-->
    <span id="blank"><img src="http://via.placeholder.com/1440x133" alt="" /></span>


    <span class="container" id="img_01"><img src="http://via.placeholder.com/1440x133" alt="" /></span>
    <a href="http://www.google.com" class="container" id="img_02"><img src="http://via.placeholder.com/1440x135" alt="" /></a>
    <span class="container" id="img_03"><img src="http://via.placeholder.com/1440x133" alt="" /></span>
    <div id="slide"></div>
  </div>
</div>

Answer №2

To improve the appearance of your slider, consider including the following CSS property:

.zd-slider a {
    display: inline-block;
}

The a tag may not be receiving proper width or height settings, causing it to appear incorrectly. Give this solution a try, and you should see positive results.

Answer №3

The problem arises due to the use of position: absolute.

This causes all images to be taken out of the normal flow. As a result, the <a/> tag does not properly "contain" the image.

To resolve this issue, consider switching to a static position and using a transform: translate animation instead of relying on opacity. This will prevent the images from overlapping each other.

Answer №4

To achieve the desired result, make sure to set the position, width, height, and z-index for the link element:

   #img_02_link{
     position: absolute; 
     top:0; left:0; 
     width: 100%; 
     height: 100%; 
     z-index:1;
  }

    .zd-slider { position:relative; overflow:hidden; margin-top: 0px; }
    .zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}

    /* set the width/height of the slideshow */
    .zd-slider img#blank {display:block; width:100%; visibility:hidden;}

    /* the slideshow */
    .zd-slider #img_01 {-webkit-animation:autoplay 9s linear infinite 0s; animation:autoplay 9s linear infinite 0s;}
    .zd-slider #img_02 {-webkit-animation:autoplay 9s linear infinite 3s; animation:autoplay 9s linear infinite 3s;}
    .zd-slider #img_03 {-webkit-animation:autoplay 9s linear infinite 6s; animation:autoplay 9s linear infinite 6s; }


    @-webkit-keyframes autoplay {
      4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
      0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
    }


    @keyframes autoplay {
      4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
      0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
    }

    /* the slide timing indicator */
    .zd-slider #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.5); 
    -webkit-animation:slide 3s linear infinite; animation:slide linear 3s infinite;}

    @keyframes slide {
      0% {left:-100px;}
      100% {left:100%;}
    }
    @-webkit-keyframes slide {
      0% {left:-100px;}
      100% {left:100%;}
    }
<div class="zd-container" id="zd-collection2"> <div class="zd-slider">

<img id="blank" src="http://via.placeholder.com/1440x133" alt="" /> 

<img id="img_01" src="http://via.placeholder.com/1440x133" alt="" /> 

<a id="img_02_link" href="http://www.google.com" target="_blank">
<img id="img_02" src="http://via.placeholder.com/1440x133" alt="" />
</a>

<img id="img_03" src="http://via.placeholder.com/1440x133" alt="" /> 

<div id="slide"></div> 
</div> 
</div>

Answer №5

Divide each slider image into its own separate div and assign a unique Z-index to the shared parent div....

Answer №6

Check out this proposed solution:

Demonstration: https://jsfiddle.net/yc07b60j/

.zd-slider {
  position: relative;
  overflow: hidden;
  margin-top: 0px;
}

.zd-slider a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.zd-slider img[id*="img"] {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}


/* set the width/height of the slideshow */

.zd-slider img#blank {
  display: block;
  width: 100%;
  visibility: hidden;
}


/* the slideshow */

.zd-slider #img_01 {
  -webkit-animation: autoplay 9s linear infinite 0s;
  animation: autoplay 9s linear infinite 0s;
}

.zd-slider #img_02 {
  -webkit-animation: autoplay 9s linear infinite 3s;
  animation: autoplay 9s linear infinite 3s;
}

.zd-slider #img_03 {
  -webkit-animation: autoplay 9s linear infinite 6s;
  animation: autoplay 9s linear infinite 6s;
}

@-webkit-keyframes autoplay {
  4%,
  33% {
    z-index: 2;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  0%,
  37%,
  100% {
    z-index: 1;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

@keyframes autoplay {
  4%,
  33% {
    z-index: 2;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  0%,
  37%,
  100% {
    z-index: 1;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}


/* the slide timing indicator */

.zd-slider #slide {
  width: 98px;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-animation: slide 3s linear infinite;
  animation: slide linear 3s infinite;
}

@keyframes slide {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}

@-webkit-keyframes slide {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}
<div class="zd-container" id="zd-collection2">
  <div class="zd-slider">

    <img id="blank" src="http://via.placeholder.com/1440x133/f44242/ffffff" alt="" />

    <img id="img_01" src="http://via.placeholder.com/1440x133/86f441/ffffff" alt="" />

    <a href="http://www.google.com">
      <img id="img_02" src="http://via.placeholder.com/1440x133/f44242/ffffff" alt="" />
    </a>

    <img id="img_03" src="http://via.placeholder.com/1440x133/41aff4/ffffff" alt="" />
    
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the back button in the browser can undo any CSS modifications made by JavaScript

I'm currently working on a form that changes the displayed select lists based on the selection of a previous list. HTML <select name="college" id="college" onchange="show_majors()"> <!-- <option value="-">-</option& ...

javascripthtmlcss

Error: The Jquery plugin Object #<HTMLDocument> does not have a function called 'observe'

Hello, I recently tried to install the Jquery plugin known as chosen that allows customization of my <select> tag across different browsers. If you're interested, you can find more information about it here. However, after integrating this plugi ...

javascriptjqueryhtmljquery-plugins

The moment a file is uploaded from an HTML page, control is passed on to the servlet

Trying to incorporate file upload functionality in my application, I have implemented the following code in my HTML: <form action="http://localhost:8080/demo/Upload/a" method="post" enctype="multipart/form-data"> <input type="text" name="descript ...

javajavascripthtmlajaxservlets

Adjusting spacing between list items in an unordered list: using the "line-height" method proved to be ineffective

here's the link to the JSFiddle where I am attempting to organize the code. I am looking to increase the spacing between Text_2a and Text_2b. Initially, I adjusted the .li class: line-height: calc(1em + 1.5vw); was modified to line-height: cal ...

htmlcsshtml-lists

Creating a basic image carousel with JavaScript, CSS, and HTML

After running the code, I encountered an issue where the first image displays but then after one second, only a white blank screen appears with no further action. It seems like there may be an error in the JavaScript code. Below is the code that was attemp ...

javascripthtmlcss

What is the best way to dismiss a custom popover when clicking outside of it?

I'm currently developing a Cordova application. I have opted to utilize Vue.js and jQuery for bindings and scripts, while also taking on the responsibility of designing the user interface myself. While I've managed to implement page transitions a ...

javascriptjqueryhtmlcssvuejs2

Using PHP and JavaScript to enhance functionality around a hyperlink

I am trying to incorporate a small piece of Javascript on my website to ensure user confirmation. While I have successfully used the 'onclick' function with buttons, I am facing difficulty implementing it on a link. Here is the link in question: ...

phpjavascripthtml

background-color has some unexpected effects

I'm trying to change the background color on my website, but no matter what I do, it stays red. I've deleted all colors, restarted XAMPP, and cleared the browser cache, but nothing is working. I'm completely stuck. And yes, I know the code i ...

phphtmlbackground-color

Enhancing HTML table interactivity: Updating class of cells upon hover

While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells However, I want the class to change from 1 to currently hovered cells If moving the mouse from 1 to 10 and then to 2, the currently hovered cells wil ...

jqueryhtmlcss

Adding spacing between <li> elements

My horizontal menu is made up of <li> elements styled with display: inline. These elements are designed to sit beside each other seamlessly. For ease of debugging, I prefer to have each li element on its own line in the source code: <li class=" ...

htmlnewlinehtml-listsline-breaks

How do you create space between a label and a textbox within separate <td> elements in a single row in a C# web application?

I need help formatting a label and textbox in a table row. I want to have the label right-aligned and the textbox left-aligned with a two-digit space between them. My current code is as follows: <table> <tr> <td align="right" class="s ...

c#asp.nethtmlalignment

Creating an element that remains in a fixed position in relation to its parent container, rather than the entire screen - here's how

Encountering an issue where, upon user scrolling down, a portion of the sidebar becomes fixed in position. However, when attempting to apply CSS for fixing the sidebar element, it ends up fixed to the entire screen instead of just within its parent contain ...

css

How to adjust the grid-gutter-width in Bootstrap 4.5 container?

If we want to change the $grid-gutter-width: 30px !default; variable specifically for the .container class, we can do so in the _variables.scss file. For example: .container { padding-left: 40px; padding-right: 40px; } Where can I make this custo ...

htmlcsstwitter-bootstrapbootstrap-4sass

Utilizing Javascript to collapse the initial DIV element discovered with a specific classname

Seeking assistance with this particular Javascript code. The objective is to collapse the next element. Unfortunately, it is not functioning as expected due to an error in closing the first DIV in each block. The script should aim to collapse the initial ...

javascripthtml

Bootstrap 4: Spacing between columns within a row

This design is almost complete, but I am facing difficulties in adding gutters between column divs in a row (on the right side, green). Additionally, configuring the width of the div that holds all the rows (blue) is proving to be challenging. You can find ...

cssbootstrap-4column-widthgutter

One of the paragraphs refuses to align with the others by floating left

Greetings everyone! This is my first time posting here, although I have been a regular visitor looking for answers on this site. Hopefully, someone can assist me with my current issue. Let me explain my problem: I've been attempting to align all the ...

htmlcsscss-float

Styling and Script Files on a JQuery Mobile Website

Is it necessary to include CSS and JS files in every HTML page for a mobile site developed with JQueryMobile? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jqu ...

javascriptcssjquery-mobile

Using Angular JS to retrieve specific information from a JSON file

I am in the process of developing an AngularJS app that showcases notes. The notes are stored in a note.json file, and the main page of the app only displays a few fields for each note. I want to implement a feature where clicking on a specific note opens ...

javascripthtmlangularjsjson

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...

htmlcssangulartypescript

Creating a combined Email and Password form field in a single row using Bootstrap

Recently, I decided to explore bootstrap. I am looking to implement email/password validation in one row on my rails app: email? | password? | OK Currently, I have a functioning code for displaying only an email field and an OK button in one row: email? ...

htmlcssruby-on-railstwitter-bootstrap