CODEWITHSUNDEEP
css
Jamie Draper
Jamie Draper

Reputation: 13

Changing transparent background-image on hover in front of background colour

I've had a search on here and can't seem to find anyone thread addressing the issue I'm having. If I've missed something though I apologise!

I'm doing work for a client who want a logo to change on hover state, with a background color to be assigned on hover at the same time. The logo is partially transparent, so the background color is intended to show through the logo.

I've got something working but I'm getting an annoying result whereby on the first mouseover, the background color appears to cover the whole image as a colored square. Subsequent hovers work as intended.

This made me wonder if the issue was a delay in the server providing the images. I tried preloading them but no luck.

I've got a prototype in Codepen, source code below! http://codepen.io/JD1990/pen/mPagaz

HTML

<div class="test">
    <img src="http://dummyimage.com/318x318/ffffff/ffffff.png">
</div>

CSS

#preload-01 { 
    background: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png) no-repeat -9999px -9999px;
}

.test {
    display: inline-block;
    position: relative;
}
.test:after {
    content: '';
    position: absolute;
    top: 0; 
    right: 0;
    bottom: 0; 
    left: 0;
    background-color: rgba(0,0,0,0);
    background-image: url(http://new-site-jd-5-5-16.new-site-    fa.appspot.com/static/content/client-logo-bbc-inverse.png);
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png);
 }

 .test:hover:after {
     background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png);
     background-color: black;
 }

Very grateful for any hints, I'm still quite inexperienced with CSS so thank you in advance :)

Upvotes: 1

Views: 2060

Answers (2)

Jonas Grumann
Jonas Grumann

Reputation: 10786

I'm not sure I got the question correctly, is this what you're going for? If you change the url to a background image it will load the image only when it's hovered, while having it in the html will make the browser to load it immediately. An even better option would be to position those images one next to the other in photoshop and combine them into a sprite, then on hover you just change the background position to show one or the other.

body {
  background-color: #BADA55;
}
.test {
  position: relative;
}

.wt {
  background-color: white;
}

.blk {
  background: black;
  display: none;
}

img {
  position: absolute;
}

.test:hover img {
  display: none;
}

.test:hover .blk {
  display: block;
}
<div class="test">
    <img class="wt" src="http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png">
  <img class="blk" src="http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png" alt="" />
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115240

Added very quick transition to the background color and removed the original background color as it wasn't necessary.

Additionally, since the image isn't being changed I removed it from the :hover rule since it wasn't required. I think this might have been the issue.

body {
  background: pink;
}
.test {
  display: inline-block;
  position: relative;
}
.test:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png);
  transition: background-color 0.1s ease;
}
.test:hover:before {
  background-color: #000;
}
<div class="test">
  <img src="http://dummyimage.com/318x318/ffffff/ffffff.png">
</div>

Upvotes: 0

Related Questions