CODEWITHSUNDEEP
csscss-transitions
StuBlackett
StuBlackett

Reputation: 3857

How can I slide in a background-image transition?

I've got a list setup. What I want to do is when you hover over the list item, The following background image appears.

Hover Image

What I'd like to do is add an effect, As the background image is a form of gradient, I'd like it to swipe from the left to the right.

I've not had much luck finding a resource for this on google.

My current CSS is :

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  transition: all 0.2s ease-in;
}
.menu-item:hover {
  background: url(../img/menu-hover-bg.png) no-repeat left;
}
.menu-item a {
  padding-top: 0.5em;
  color: #ffffff;
  text-transform: uppercase;
  display: block;
}

I've also made a JSFiddle of what I have at the moment.

Upvotes: 0

Views: 1142

Answers (2)

Jesse
Jesse

Reputation: 3612

I have made a transition on the background-size property, which seems to have the desired effect:

.menu-item {
  background-size: 0% 100%;
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  transition: all 0.2s ease-in;
}
.menu-item:hover {
  background: url(https://i.sstatic.net/jMwI7.png) no-repeat;
  background-size: 300px 100%;
}

See this updated fiddle: https://jsfiddle.net/t2v25ppz/22/

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272772

You can play with background-size like this:

#sidebar {
  padding-top: 2em;
  padding-bottom: 2em;
  background: #21203d;
}

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  background-image: url(https://i.sstatic.net/jMwI7.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 0 100%;
  transition: all 0.2s ease-in;
}

.menu-item:hover {
  background-size: 200px 100%;
}

.menu-item a {
  padding-top: 0.5em;
  color: white;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}
<div id="sidebar">
  <ul id="menu" class="main-menu">
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Home</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>News</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Our Team</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Fixtures</a>
    </li>
  </ul>
</div>

You can also easily recreate this background without the use of image and you can have a more complex animation:

#sidebar {
  padding-top: 2em;
  padding-bottom: 2em;
  background: #21203d;
}

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  background-image: 
  linear-gradient(#f13c4a,#f13c4a),
  linear-gradient(to right,black,transparent);
  background-repeat: no-repeat;
  background-position: left;
  background-size:  5px 0%,0 100%;
  transition: all 0.2s ease-in;
}

.menu-item:hover {
  background-size: 4px 100%,200px 100%;
}

.menu-item a {
  padding-top: 0.5em;
  color: white;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}
<div id="sidebar">
  <ul id="menu" class="main-menu">
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Home</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>News</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Our Team</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Fixtures</a>
    </li>
  </ul>
</div>

Upvotes: 2

Related Questions