CODEWITHSUNDEEP
htmlcss
jimmy118
jimmy118

Reputation: 323

transform not working on css hover element

I can't seem to find what I am doing wrong here. The transform property should come into effect when the element is hovered, but nothing is happening when the event occurs.

Is anyone able to see what I am doing wrong here?

.btn:link,
.btn:visited {
  text-transform: uppercase;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
}

.btn-white {
  background-color: white;
  color: #777;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}
<div class="logobox">
  <img src="img/logo-white.png" class="logo" alt="logo">
</div>
<div class="text-box">
  <h1 class="primary-header">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
  </h1>
  <a href="#" class="btn btn-white">Discover Our Tours</a>
</div>

Upvotes: 9

Views: 10327

Answers (3)

JideLambo
JideLambo

Reputation: 91

.text-box {
  margin: 30px auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-family: sans-serif;
}
.btn {
   text-transform: uppercase;
   padding: 15px 40px;
   text-decoration: none;
   border-radius: 100px;
 }
.btn-white {
   background-color: white;
   border: 1px solid #666;
   color: #777;
   transform: scaleY(1);
   transition: transform 1.5s ease;
}
.btn-white:hover {
    transform: scaleY(2);
 }

 .btn:active {
    transform: translateY(1);
  }
<div class="logobox">
  <img src="img/logo-white.png" class="logo" alt="logo">
</div>
<div class="text-box">
  <h1 class="primary-header">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
  </h1>
  <a href="#" class="btn btn-white">Discover Our Tours</a>
</div>

Upvotes: 0

xArchange
xArchange

Reputation: 73

Your link is not a block element, I think that is where the problem is coming from. <a>...</a> is an inline element, you cannot apply transform on those.

The transformable elements are described here.

As for your code itself, this should do the trick:

.btn-white {
  background-color: white;
  color: #777;
  display: inline-block;
}

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115011

Links are display:inline by default and so are not affected by transform.

Make the link display:inline-block.

.btn:link,
.btn:visited {
  text-transform: uppercase;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
  display: inline-block;
}

.btn-white {
  background-color: white;
  color: #777;
}

.btn:hover {
  transform: translateY(-30px);
}

.btn:active {
  transform: translateY(-10px);
}
<div class="text-box">
  <h1 class="primary-header">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
  </h1>
  <a href="#" class="btn btn-white">Discover Our Tours</a>
</div>

Upvotes: 23

Related Questions