CSS Transition Background Gradient (Hack)

Question

I'm trying to use the background-position/transition hack found here and here to animate the background transition of a panel on hover... I'm not sure what I'm doing wrong but it isn't working for me.

Here's the relevant code I have so far (using Bootstrap v3)

html:

<div class="panel panel-default">
  <div class="panel-body">
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo
  </div>
</div>

scss:

.panel,
.panel-default {
  border-radius: 3rem;
  cursor: pointer;
  cursor: hand;
  overflow: hidden;
}

.panel-body {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f4f4));
  background-image: -webkit-linear-gradient(#fff, #f4f4f4);
  background-image: -moz-linear-gradient(#fff, #f4f4f4);
  background-image: -o-linear-gradient(#fff, #f4f4f4);
  background-image: linear-gradient(#fff, #f4f4f4);
  -webkit-background-size: auto 200%;
  background-size: auto 200%;
  background-position: 0 100%;
  font-size: medium;
  padding-left: 56px;
  padding-left: 3.5rem;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;

  .glyphicon-link {
    padding-right: 56px;
    padding-right: 3.5rem;
  }
}

.panel-body:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#093479));
  background-image: -webkit-linear-gradient(#337ab7, #093479);
  background-image: -moz-linear-gradient(#337ab7, #093479);
  background-image: -o-linear-gradient(#337ab7, #093479);
  background-image: linear-gradient(#337ab7, #093479);
  background-position: 0 0;
  color: white;
  padding-left: 88px;
  padding-left: 5.5rem;
}

.panel-body:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547));
  background-image: -webkit-linear-gradient(#1eb759, #4f8547);
  background-image: -moz-linear-gradient(#1eb759, #4f8547);
  background-image: -o-linear-gradient(#1eb759, #4f8547);
  background-image: linear-gradient(#1eb759, #4f8547);
}

I also set up a jsfiddle here:

Not really sure how you want the transition to behave. This is the general idea... jsfiddle.net/6rusdruy/4 maybe like this? jsfiddle.net/6rusdruy/5 — Michael Coker
– Michael Coker, Commented Jul 4, 2017 at 20:20
Thanks. Yea I'd like it to appear to fade in/out... Maybe I need to rethink this with opacity or something... — DjH
– DjH, Commented Jul 4, 2017 at 20:22
NP. lemme know if you'd like me to submit that as an answer or do something else with it. I edited the comment with a stab at a more gradient-ish transition — Michael Coker
– Michael Coker, Commented Jul 4, 2017 at 20:22

Michael Coker · Accepted Answer · 2017-07-04 20:30:50Z

You're setting a new background-image on :hover - you just want to adjust the background-position on :hover instead.

.panel,
.panel-default {
  border-radius: 3rem;
  cursor: pointer;
  cursor: hand;
  overflow: hidden;
}

.panel-body {
  background-image: -webkit-linear-gradient(top, #fff 0%, #f4f4f4 25%, #337ab7 75%, #093479 100%);
  background-image: linear-gradient(to bottom, #fff 0%, #f4f4f4 25%, #337ab7 75%, #093479 100%);
  background-size: auto 400%;
  background-position: 0 0;
  font-size: medium;
  padding-left: 56px;
  padding-left: 3.5rem;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}
.panel-body .glyphicon-link {
  padding-right: 56px;
  padding-right: 3.5rem;
}

.panel-body:hover {
  background-position: 0 100%;
  color: white;
  padding-left: 88px;
  padding-left: 5.5rem;
}

.panel-body:active {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547));
  background-image: -webkit-linear-gradient(#1eb759, #4f8547);
  background-image: linear-gradient(#1eb759, #4f8547);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="panel panel-default">
  <div class="panel-body">
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo
  </div>
</div>

Collectives™ on Stack Overflow

CSS Transition Background Gradient (Hack)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related