CODEWITHSUNDEEP
htmlcss
arp123
arp123

Reputation: 69

how can i increase the width of an element when hover

How can I increase the width of an element in HTML when someone hover on that element.

I wrote some code for that animation using CSS but I am not getting the expected result.

Here's what I am getting when I hover on that element:-

image.gifenter image description here

Here's what I want:- imageenter image description here

here is my code:-

HTML:-

<!DOCTYPE html>
<html>

   <head>
      <title>home</title>
      <link rel="stylesheet" type="text/css" href="css/index.css" />
      <link rel="stylesheet" type="text/css" href="animations/index.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1">

   </head>

   <body> 
      <div class="main-wrapper"> 
         <header> </header> 
         <div><nav>
            <ul id="navul01">
               <li><a class="active" href="#home">Home</a></li>
               <li><a href="#news">blog</a></li>
               <li><a href="#contact">subjects</a></li>
               <li><a href="#about">contacts</a></li>
            </ul>
         </nav></div>
      </div>
      <div>
         <ul id="space">
            <li><a></a></li>
         </ul>
      </div>
      <div>
         <ul id="subjects_nav">
            <li><a id="physics_image" href="#home">PHYSICS</a></li>
            <li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
            <li><a id="maths_image" href="#contact">MATHS</a></li>
         </ul>
      </div>
   </body>

</html>

CSS:-

header {
    width:100%; 
    height:350px; 
    position:relative;
    overflow:hidden; 
    z-index:-1;
    border:3px solid grey;
    background-position: center center;
    display: flex;
    background-image:url("../images/index/header/header.jpg");
    background-size: cover;
}

.main-wrapper {
  position: relative;
} 

#navul01 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}

#navul01 li {
    float: left;
}

#navul01 li a {
    display: block;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px black;
    text-align: center;
    padding: 14px 16px;
    font-size: 25px;
    text-decoration: none;
    border:2px solid white;
}

#navul01 li a:hover {
    background-color: lightgreen;
}

#subjects_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    left: 10%;
    width: 80%;
}

#subjects_nav li {
    float: center;
}

#subjects_nav li a {
    display: block;
    color: white;
    font-size: 5vw;
    font-weight: bold;
    text-shadow: 2px 2px black;
    text-align: center;
    padding: 50px 50px;
    text-decoration: none;
    border:3px solid white;
}

#subjects_nav li a:hover {
    animation-name: subject_animation;
    animation-duration: 1s;
}

#physics_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/physics.jpg");
    background-size: cover;
}

#chemistry_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/chemistry.jpg");
    background-size: cover;
}

#maths_image {
    background-position: center center;
    display: flex;
    background-image:url("../images/index/subjects/maths.jpg");
    background-size: cover;
}

#space {
  list-style: none;
}

(ANIMATION) CSS :-

@keyframes subject_animation {
    from {
        width: 80%;
    }
    to {
        width: 90%;
    }

UPDATE - 1:-

i used this code in CSS transform: scale(1.2, 1); but it stretch the images and make them look ugly and i only want transformation in x-axis so i used transform: scaleX(1.4); this also stretch the image

Upvotes: 0

Views: 549

Answers (1)

Temani Afif
Temani Afif

Reputation: 273990

Think differently and instead of changing the width change the margin to make them negative values. You can also use transition instead of animation:

By the way there is no float:center, you need to correct this on your code.

Here is the relevant part of the code to show the result:

#subjects_nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 10%;
  width: 80%;
}

#subjects_nav li a {
  display: block;
  color: white;
  font-size: 5vw;
  font-weight: bold;
  text-shadow: 2px 2px black;
  text-align: center;
  padding: 50px 50px;
  text-decoration: none;
  border: 3px solid white;
  transition: 1s;
}

#subjects_nav li a:hover {
  margin: 0 -30px;
}

#physics_image {
  background-position: center center;
  display: flex;
  background-image: url("https://lorempixel.com/1000/1000/");
  background-size: cover;
}

#chemistry_image {
  background-position: center center;
  display: flex;
  background-image: url("https://lorempixel.com/800/1000/");
  background-size: cover;
}

#maths_image {
  background-position: center center;
  display: flex;
  background-image: url("https://lorempixel.com/1000/600/");
  background-size: cover;
}

#space {
  list-style: none;
}
<ul id="subjects_nav">
  <li><a id="physics_image" href="#home">PHYSICS</a></li>
  <li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
  <li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>

Upvotes: 3

Related Questions