Flex Hover Slider | Hover Using Html Css jQuery

 Flex Hover Slider | Hover Using Html Css  Jquery

Flex Hover Slider | Hover Using Html Css  jQuery

Welcome🎉 to Code With Random blog. In this blog, we learn how we 
create a Flex Hover Slider. We use HTML, Css, and javascript(jQuery) for this  Flex Hover Slider. Hope you enjoy our blog so let's start with a basic HTML structure for a  Flex Hover Slider.

HTML code

 <!DOCTYPE html>   
  <html lang="en">   
  <head>   
   <meta charset="UTF-8" />   
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title> Flex Hover Slider</title>   
   <link rel="stylesheet" href="style.css">  
  </head>   
  <body>   
   <div class="flex-container">  
     <div class="spinner"><p>  
       <div class="cube1"></div>  
       <div class="cube2"></div>  
       Loading...  
       </p>  
     </div>  
     <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>  
   <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>  
  </body>   
  </html>   
There is all HTML code for the Flex Hover Slider. Now, you can see output without CSS, then we write css & javascript for the  Flex Hover Slider.
output
Flex Hover Slider | Hover Using Html Css  jQuery

CSS(Scss) Code

 @import url('https://fonts.googleapis.com/css?family=Raleway');  
 $defaultSeconds: 3s;  
 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-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) {  
           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) {  
           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) {  
           overflow: auto;  
           overflow-x: hidden;  
      }  
 }  
 .flex-slide p {  
      @media screen and (max-width: 768px) {  
           font-size: 2em;  
      }  
 }   
 .flex-slide ul li {  
      @media screen and (max-width: 768px) {  
           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) {  
           animation: aboutFlexSlide $defaultSeconds 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;  
      }  
 }  
 .flex-title-home {  
      @media screen and (min-width: 768px) {  
           transform: rotate(90deg);  
           top: 15%;  
           animation: aboutFlexSlide $defaultSeconds 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) {  
           animation: aboutFlexSlide $defaultSeconds 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;  
 }  
 // Preloader  
 .spinner {  
      position: fixed;  
      top: 0;  
      left: 0;  
      background: #222;  
      height: 100%;  
      width: 100%;  
      z-index: 11;  
      margin-top: 0;  
      color: #fff;  
      font-size: 1em;  
 }  
 .cube1, .cube2 {  
  background-color: #fff;  
  width: 15px;  
  height: 15px;  
  position: absolute;  
  top: 0;  
  left: 0;  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;  
  animation: sk-cubemove 1.8s infinite ease-in-out;  
 }  
 .cube2 {  
  -webkit-animation-delay: -0.9s;  
  animation-delay: -0.9s;  
 }  
 @-webkit-keyframes sk-cubemove {  
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }  
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }  
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }  
  100% { -webkit-transform: rotate(-360deg) }  
 }  
 @keyframes sk-cubemove {  
  25% {   
   transform: translateX(42px) rotate(-90deg) scale(0.5);  
   -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);  
  } 50% {   
   transform: translateX(42px) translateY(42px) rotate(-179deg);  
   -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);  
  } 50.1% {   
   transform: translateX(42px) translateY(42px) rotate(-180deg);  
   -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);  
  } 75% {   
   transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);  
   -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);  
  } 100% {   
   transform: rotate(-360deg);  
   -webkit-transform: rotate(-360deg);  
  }  
 }  

Here is our updated output CSS.

output
Flex Hover Slider | Hover Using Html Css  jQuery

Javascript (jQuery) code 

 (function(){  
      $('.flex-container').waitForImages(function() {  
           $('.spinner').fadeOut();  
      }, $.noop, true);  
      $(".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'  
                });  
           })  
      });  
 })();  
Final output
Flex Hover Slider | Hover Using Html Css  jQuery

Flex Hover Slider | Hover Using Html Css  jQuery

Flex Hover Slider | Hover Using Html Css  jQuery


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Flex Hover Slider. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

1 Comments

Post a Comment

Previous Post Next Post