Hey everyone, let’s dive into today’s coding project! We’re going to create a Flex Card Hover Slider using HTML, CSS, and JavaScript – simple and fun.
In this tutorial, we’re not just building a card slider; we’re using the flexibility of CSS Flexbox and adding a touch of interactivity with JavaScript. Whether you’re a seasoned coder or just starting out, this is a great opportunity to enhance your skills and create a cool slider effect for your web projects.
Let’s keep it simple and enjoyable as we play with HTML, CSS, and JavaScript to create something both practical and visually appealing. Ready to add a bit of flair to your projects?
Let’s get started on our Flex Card Hover Slider journey – the easy and creative way!
HTML :
The given code is an HTML document that creates a flex card hover slider. It consists of a container with multiple slides representing different sections of a website, including Home, About, Work, and Contact. Each slide has a title and a description. The Work slide includes a list of relevant work snippets, and the Contact slide includes a contact form. The code also includes JavaScript libraries for jQuery and image loading.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Flex Card Hover Slider | CodingStella </title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="flex-container"> <div class="flex-slide home"> <div class="flex-title flex-title-home">Home</div> <div class="flex-about flex-about-home"><p>Click here to navigate to the home section of the website</p></div> </div> <div class="flex-slide about"> <div class="flex-title">About</div> <div class="flex-about"><p>Click here to navigate to the About section of the website</p></div> </div> <div class="flex-slide work"> <div class="flex-title">Work</div> <div class="flex-about"><p>Listing relevant snippets of work:</p> <ul> <li>First piece of work</li> <li>Second piece of work</li> <li>Third piece of work</li> </ul> </div> </div> <div class="flex-slide contact"> <div class="flex-title">Contact</div> <div class="flex-about"> <p>Use the contact form below</p> <form class="contact-form"> <p>Email <input type="text" name="email"></p> <p>Comment <textarea type="text" name="comment" row="5"></textarea></p> <p><input type="submit" name="email" value="Send Message"></p> </form> </div> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/jquery.waitforimages.min.js'></script><script src="./script.js"></script> </body> </html>
CSS :
The given code is a CSS code that defines the styling and layout for a webpage. It includes various classes such as flex-container, flex-title, flex-about, flex-slide, home, about, contact-form, contact, and work. These classes define the positioning, size, color, and transitions for different elements on the webpage. The code also includes media queries to adjust the styling for different screen sizes. Overall, the code creates a visually appealing and responsive webpage design.
@import url("https://fonts.googleapis.com/css?family=Raleway");
body {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
}
.flex-container {
position: absolute;
height: 100vh;
width: 100%;
display: -webkit-flex;
/* Safari */
display: flex;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.flex-container {
flex-direction: column;
}
}
.flex-title {
color: #f1f1f1;
position: relative;
font-size: 6vw;
margin: auto;
text-align: center;
transform: rotate(90deg);
top: 15%;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
.flex-title {
transform: rotate(0deg) !important;
}
}
.flex-about {
opacity: 0;
color: #f1f1f1;
position: relative;
width: 70%;
font-size: 2vw;
padding: 5%;
top: 20%;
border: 2px solid #f1f1f1;
border-radius: 10px;
line-height: 1.3;
margin: auto;
text-align: left;
transform: rotate(0deg);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
.flex-about {
padding: 0%;
border: 0px solid #f1f1f1;
}
}
.flex-slide {
-webkit-flex: 1;
/* Safari 6.1+ */
-ms-flex: 1;
/* IE 10 */
flex: 1;
cursor: pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
.flex-slide {
overflow: auto;
overflow-x: hidden;
}
}
@media screen and (max-width: 768px) {
.flex-slide p {
font-size: 2em;
}
}
@media screen and (max-width: 768px) {
.flex-slide ul li {
font-size: 2em;
}
}
.flex-slide:hover {
-webkit-flex-grow: 3;
flex-grow: 3;
}
.home {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
@media screen and (min-width: 768px) {
.home {
animation: aboutFlexSlide 3s 1;
animation-delay: 0s;
}
}
@keyframes aboutFlexSlide {
0% {
-webkit-flex-grow: 1;
flex-grow: 1;
}
50% {
-webkit-flex-grow: 3;
flex-grow: 3;
}
100% {
-webkit-flex-grow: 1;
flex-grow: 1;
}
}
@media screen and (min-width: 768px) {
.flex-title-home {
transform: rotate(90deg);
top: 15%;
animation: aboutFlexSlide 3s 1;
animation-delay: 0s;
}
}
@keyframes homeFlextitle {
0% {
transform: rotate(90deg);
top: 15%;
}
50% {
transform: rotate(0deg);
top: 15%;
}
100% {
transform: rotate(90deg);
top: 15%;
}
}
.flex-about-home {
opacity: 0;
}
@media screen and (min-width: 768px) {
.flex-about-home {
animation: aboutFlexSlide 3s 1;
animation-delay: 0s;
}
}
@keyframes flexAboutHome {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.about {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.contact-form {
width: 100%;
}
input {
width: 100%;
}
textarea {
width: 100%;
}
.contact {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.work {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
JavaScript:
The given code is a jQuery code snippet that adds hover functionality to elements with the class "flex-slide". When a "flex-slide" element is hovered over, it finds the child elements with the classes “flex-title” and “flex-about” and applies CSS changes to them. The "flex-title" element is rotated to 0 degrees and moved to the top by 10%, while the "flex-about" element’s opacity is set to 1. When the hover event ends, the CSS changes are reversed, with the "flex-title" element rotating back to 90 degrees and moving to the top by 15%, and the “flex-about” element’s opacity set back to 0. This code creates a hover effect that modifies the appearance of the elements when they are hovered over.
$(".flex-slide").each(function(){
$(this).hover(function(){
$(this).find('.flex-title').css({
transform: 'rotate(0deg)',
top: '10%'
});
$(this).find('.flex-about').css({
opacity: '1'
});
}, function(){
$(this).find('.flex-title').css({
transform: 'rotate(90deg)',
top: '15%'
});
$(this).find('.flex-about').css({
opacity: '0'
});
})
});
There you have it – our Flex Card Hover Slider is ready to roll! With HTML, CSS, and a touch of JavaScript, we’ve crafted a simple yet stylish slider. Whether you’re a coding pro or just starting out, kudos on completing this fun project. Now, go ahead, customize, and enjoy the fruits of your coding adventure! Ready for more? Stay tuned for what’s next!
Encountering obstacles in your project? No need to worry. The source code is ready for you. Click Download and kick off your coding adventure. May your coding endeavors be enjoyable!
