Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or automatically start sliding through.

From what I know, achieving this without jQuery seems difficult, as we have been trying to avoid it. But I'm open to suggestions and ideas from anyone willing to share. Before giving up hope entirely, I thought I would reach out to see if there are any solutions out there. If you happen to have a quick jQuery fix, I am all ears and willing to consider it.

Here is the HTML code for the Slider:

<div id="slider">
        <ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<a href="#"><label for="slide1"></label></a>
<img src="/images/Slide1.png" />
</li>
<li>
<input type="radio" id="slide2" name="slide">
<a href="#"><label for="slide2"></label></a>
<img src="/images/Slide2.png" />
</li>
<li>
<input type="radio" id="slide3" name="slide">
<a href="#"><label for="slide3"></label></a>
<img src="/images/Slide3.png" />
</li>
<li>
<input type="radio" id="slide4" name="slide">
<a href="#"><label for="slide4"></label></a>
<img src="/images/Slide4.png" id="slide4img" />
</li>
</ul>
    </div>

Below is the CSS code for the slider:

/*CSS Code for the Slider*/
#slider {
  bottom:2%;
  left: -4%;
  margin: 0 auto;
  position: relative;
  top:65px;
  z-index: 15;
}
.slider. {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
height:580;
width: 1020px;
}
.slider li {
    -webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
list-style: none; 
position:absolute;
}
.slider img {
    -webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
  margin: 0 auto;
height:580;
width:1020px;
vertical-align: top;
}

.slider input {
display: none;
}
.slider label {
background-color:#69d2e7;
bottom: 8px;
cursor: pointer;
display: block;
height: 20px;
position:absolute; 
width: 20px; 
border-radius: 10px;
z-index: 10; 

-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.slider li a:hover label {
  background-color: #297cab;
}

.slider li a:hover label:after  {
  background-color: #297cab;
}


.slider li:nth-child(1) label {
margin-bottom: 1.1%;
left: 40%;
} 
.slider li:nth-child(2) label { 
margin-bottom: 1%;
left: 45%;
}
.slider li:nth-child(3) label {
margin-bottom: 1%;
left: 50%;
}
.slider li:nth-child(4) label {
margin-bottom: 1%;
left: 55%; 
}
.slider img {
opacity: 0; 
visibility: hidden;
}

.slider li input:checked ~ img {
opacity: 1; 
visibility: visible; 
z-index: 10; 
}

Answer №1

Try out this solution by Chris Coyer. It's incredibly easy to use and won't weigh down your project.

http://example.com/slideshow

Best of luck with your project!

Answer №2

To achieve a mouseover image transition, simply update the :checked event to :hover in your su-home.css file on line 202.

.slider li input:hover ~ img {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

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

Encountering an issue with retrieving the nth element using Python Selenium

<div class="booking-classes"> <h3 style="text-align: center;"> <p><a href="https://foreupsoftware.com/index.php/booking/20290#/teetimes" style="background-position:0px 0px;"><b> ...

Styling Based on Conditions in Angular

Exploring the unique function of conditional formatting in Microsoft Excel, where color bars are utilized to represent percentages in comparison to the highest value. Is there a way to replicate this functionality using HTML5 with CSS or JavaScript? Perha ...

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

Encountering a CSS syntax error within CodeSandbox when attempting to input code within brackets

Why is it that I don't see syntax errors in VSCode, but always encounter them in CodeSandbox? What could be causing this discrepancy and how can I resolve it? Any advice would be greatly appreciated. Thank you in advance. Here's an example of th ...

Bringing in typefaces to enhance your email signature

I am trying to design a unique email signature with a custom Adobe font. My email account is hosted by Strato, a German mail server. However, when I attempted to insert the signature using Apple Mail, I realized that the CSS <style> part was not bein ...

Explain the concept of grid layout in CSS

Can you please clarify the distinctions between grid and liquid layouts? Specifically, I am interested in understanding the concept of a grid layout. Thank you in advance for your explanation. ...

What are the best practices for utilizing intro.js effectively on mobile devices?

Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the too ...

Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...

"Text data will be automatically cut at the end of a page and continue

I encountered the following issue As depicted in the image The data is not being displayed properly In the next td, the last character 3 is also printed on the next line Is it possible to avoid page footer and header without adjusting the page margin? ...

Steps to customize a CSS file within node_modules

Is there a way to make changes to a CSS file in the "node_modules" dependency without them being overwritten when I run npm install? I want to keep the modifications I've made to the node module files. ...

Are you seeing empty squares in place of Font Awesome icons?

If the Font Awesome icons are displaying as blank squares in all browsers despite correctly linking the stylesheet and attempting to install the package through npm which results in a npm ERR! code E401, it can be frustrating. Even after checking the brows ...

What is the best way to add child elements to the parent element when the height limit has been reached?

This is the code I've been working on: <ul style="height:200px;width:100%;"> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... (add more items here) </ul> Here is a preview of how it currently looks: ...

How to Perfectly Align a Gif

I'm trying to understand the functionality behind this code snippet. Can anyone shed some light on it? img{ display:block; margin:auto; } I attempted to center a gif using this code block after my teacher suggested trying align:center; without succe ...

concealing components during screen adjustments

There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

The printed PDF of a webpage does not display HTML table background colors in Chrome or Firefox

Is there a way to change the colors of table cells in an HTML table when exporting to PDF? I'm creating content dynamically that includes background-color: #ffffff (or red) and showing it on a webpage, but the cell backgrounds appear as white in the P ...

Tips for achieving a precise amount of boxes in each row

Is it possible to only have 5 boxes per line and then the next one goes to the next line using CSS? https://i.stack.imgur.com/L7vr4.png .box { border-color: #32ff00; border-width: 4px; border-style: dotted; width: 170px; height: 200px; fl ...

What are the best techniques for styling a SELECT box with HTML and CSS?

I've received a form from a talented designer which includes SELECT inputs designed in a unique manner. Despite my attempts to add paddings, adjust backgrounds, I'm unable to replicate the exact appearance of the select box shown in the image. ...

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

I have a Data table with virtualized columns, totaling more than 25 in number. Users can easily scroll horizontally using a trackpad, but without one, they may struggle to access all the columns due to the delayed appearance of the scrollbar. Is there a w ...

What is preventing a nested flexbox from expanding to the entire width?

Here's an example of some HTML/CSS code: <div style="display: flex; background-color: yellow;"> <div style="display: flex;background-color: lightblue;">i am a NESTED flexbox</div> </div> This results in https://i.sstati ...