CODEWITHSUNDEEP
htmlcss
Provision
Provision

Reputation: 37

Can't apply transition to transform scale

I'm currently working on a website for a local business, i have a menu bar so far, however the transition i place on the transform: scale(1.2) is not working, i have looked for hours for a solution but to no avail. From what i gather, my code should be working perfectly fine, yet the transition won't apply, if i simply resize the li on hover without using transform it will shift the other items around it, although the transition works like that, the result looks ugly, the menu is full size and is not responsive yet, so it's not meant to look good on a small screen, here is my code.

 <!DOCTYPE html>
  <html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>
      Pacific Cay
     </title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
  <body>
   <div class="container">
    <div class="menu">
     <ul>
      <a href="#"><li class="about2">About Us</li></a>
       <a href="#"><li>About Us</li></a>
     <a href="home.html"><li id="logobox"><span id="hiddenoverlay">About us.
     </span></li></a>
    <a href="#"><li>About Us</li></a>
    <a href="#"><li class="about">About Us</li></a>
   </ul>

  </div>
</div>
</body>
</html>



body
{
 background-image: url("banner.jpg");
 background-repeat: no-repeat;
 background-size: cover;
}

ul 
{
 list-style: none;
 padding: 5px;
 margin: 0px;
 padding-left: 3.3em;
 padding-top: 2em;
}

ul li 
 {
 margin-left: 0.7em;
 font-size: 55px;
 display: block;
 position: relative;
 float: left;
 border-top: 5px outset #3333ff;
 border-bottom: 5px outset #3333ff;
 border-radius: 20px;
}

li ul 
{
 display: none;
}

ul a li 
{
 display: block;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 white-space: nowrap;color: #fff;
 transition: transform 1s;
 transition: background-color 0.5s;
 transition: box-shadow 0.5s;
 box-shadow: 0px 0px 0px 0px #000000;
}

ul a li:hover 
{
 transform: scale(1.2);
 box-shadow: 0px 10px 20px 0px #000000;
 background: #c0c0c0;
}

li:hover ul 
{
 display: block; 
 position: absolute;
}

li:hover li 
{
 float: none;
}

a:hover li 
{
 background: #f00;
}

li:hover a li:hover 
{
 background: #000;
}

#drop-nav li ul li 
{
 border-top: 0px;
}

.menu 
{
 position: absolute;
 background: #7777ff;
 width: 100%;
 top: 0;
 left: 0;
 height: 10em;
 border-bottom: 1px outset #3333ff;
}

#logobox
{
 background-image: url("logo.png");
 height: 1.7em;
 background-repeat: no-repeat;
 margin-top: -0.3em;
 font-size: 60px;
}

#hiddenoverlay
{
 opacity: 0;
}

.about2
{
 margin-left: -0.7em;
}

Here is a jsfiddle: https://jsfiddle.net/0k62nz1w/

Upvotes: 1

Views: 1181

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You define multiple transitions with a single transition separated by commas. https://jsfiddle.net/0k62nz1w/1/

body {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

ul {
  list-style: none;
  padding: 5px;
  margin: 0px;
  padding-left: 3.3em;
  padding-top: 2em;
}

ul li {
  margin-left: 0.7em;
  font-size: 55px;
  display: block;
  position: relative;
  float: left;
  border-top: 5px outset #3333ff;
  border-bottom: 5px outset #3333ff;
  border-radius: 20px;
}

li ul {
  display: none;
}

ul a li {
  display: block;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: transform 1s, background-color 0.5s, box-shadow 0.5s;
  box-shadow: 0px 0px 0px 0px #000000;
}

ul a li:hover {
  transform: scale(1.2);
  box-shadow: 0px 10px 20px 0px #000000;
  background: #c0c0c0;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
}

a:hover li {
  background: #f00;
}

li:hover a li:hover {
  background: #000;
}

#drop-nav li ul li {
  border-top: 0px;
}

.menu {
  position: absolute;
  background: #7777ff;
  width: 100%;
  top: 0;
  left: 0;
  height: 10em;
  border-bottom: 1px outset #3333ff;
}

#logobox {
  background-image: url("logo.png");
  height: 1.7em;
  background-repeat: no-repeat;
  margin-top: -0.3em;
  font-size: 60px;
}

#hiddenoverlay {
  opacity: 0;
}

.about2 {
  margin-left: -0.7em;
}
<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      Pacific Cay
    </title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="menu">
        <ul>
          <a href="#">
            <li class="about2">About Us</li>
          </a>
          <a href="#">
            <li>About Us</li>
          </a>
          <a href="home.html">
            <li id="logobox"><span id="hiddenoverlay">About us.</span></li>
          </a>
          <a href="#">
            <li>About Us</li>
          </a>
          <a href="#">
            <li class="about">About Us</li>
          </a>
        </ul>

      </div>
    </div>
  </body>

</html>

Upvotes: 2

Related Questions