Table of Contents
Best Bouncy Image Slider Animation Using HTML & CSS With Source Code
Hello friends, welcome to today’s blog post. Are you also learning coding or want to learn coding, then you have come to the right website. Today we have created Bouncy Image Slider Animation Using HTML & CSS with the help of HTML CSS, which is quite amazing and this project is completely beginner friendly which you can use. This type of project can be made very easily and quickly and by making such projects you get a very good knowledge of coding.
In this Bouncy Image Slider Animation, we have used some images and when the user clicks on any image, then that image will open with animation which looks quite amazing.
Bouncy Image Slider Animation Using HTML & CSS
To create Bouncy Image Slider, you will definitely need this code. This code is HTML code, with the help of which we have created the structure of this Bouncy Image Slider. With this HTML code, you can only create a normal structure.
If you have some knowledge of HTML then you can create an image slider in some other way. We have used some label tags in the HTML code and also used image tags because we have also added some images in the slider. Then we have used CSS to design it which you will see below.
Bouncy image radio group
Bouncy Image Slider Animation CSS​
This code is of CSS with the help of which we have designed this image slider project. Without the help of CSS, your project looks very bad, that is why we have taken the help of CSS. Friends, with the help of CSS, what kind of hover effect do you want to apply in your slider, so that when a user hovers over the image, it is visible to him. You can do all that work with the help of CSS.
Friends, we have also used some animation in this beautiful image slider, without which our image slider does not look good at all. If you want that there should be some hover effect or animation in the image slider, you can do that too.
@import "https://unpkg.com/open-props" layer(design.system);
@layer demo {
fieldset {
grid-template-columns:
var(--col-1, 1fr)
var(--col-2, 1fr)
var(--col-3, 1fr)
var(--col-4, 1fr)
var(--col-5, 1fr)
;
@media (prefers-reduced-motion: no-preference) {
transition: grid-template-columns 2s var(--ease-spring-5);
}
&:has(label:nth-child(1) > input:checked) {
--col-1: 5fr;
--col-2: 3fr;
}
&:has(label:nth-child(2) > input:checked) {
--col-1: 2fr;
--col-2: 5fr;
--col-3: 2fr;
}
&:has(label:nth-child(3) > input:checked) {
--col-2: 2fr;
--col-3: 5fr;
--col-4: 2fr;
}
&:has(label:nth-child(4) > input:checked) {
--col-3: 2fr;
--col-4: 5fr;
--col-5: 2fr;
}
&:has(label:nth-child(5) > input:checked) {
--col-4: 3fr;
--col-5: 5fr;
}
> label {
background-image: var(--_img);
background-position: center;
background-size: auto 125%;
}
}
}
@layer demo.support {
html {
background: repeating-radial-gradient(rgb(35, 15, 65), rgb(86, 11, 85), rgb(148, 33, 194), rgb(15, 3, 43), rgb(27, 3, 34));
block-size: 100%;
}
body {
min-block-size: 100%;
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
fieldset {
inline-size: 80vw;
display: grid;
grid-auto-flow: column;
grid-template-rows: 50vh;
gap: var(--size-3);
border: none;
> label {
cursor: pointer;
border-radius: var(--radius-4);
&:focus-within {
outline: 1px solid green;
outline-offset: 5px;
}
> input {
opacity: 0;
}
}
}
}
Live Preview:
See the Pen Bouncy image radio group by Codewithshobhit (@Codewithshobhit) on CodePen.