Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by mike espn
mike espn
1,072 Points

How to Fade In/Out Hover Background Image with CSS?

So, I am building a portfolio page for future employers to take a look at.

One of my thumbnails which is for web design I have set up a hover background image.

I am trying to fade in/out the background image instead of an instant hover effect.

This is the CSS code...

#u132-4
{
    z-index: 23;
    width: 200px;
    min-height: 200px;
    border-style: none;
    border-color: transparent;
    background-color: #2C3E50;
    text-align: center;
    font-size: 23px;
    line-height: 28px;
    color: #EDEDED;
    font-weight: bold;
    position: relative;
    margin-right: -10000px;
    transition: 1s ease;

}



#u132-4:hover
{
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 200px;
    margin: 0px -10000px 0px 0px;
    background-image:url("../images/web%20design%20thumbnail%20rollover.png");


}

Here is the HTML Code

<!DOCTYPE html>
<html class="html">
 <head>

  <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
  <meta name="generator" content="7.2.232.244"/>
  <title>Home</title>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/site_global.css?417434784"/>
  <link rel="stylesheet" type="text/css" href="css/index.css?548055" id="pagesheet"/>
  <!-- Other scripts -->
  <script type="text/javascript">
   document.documentElement.className += ' js';
</script>
    <!--custom head HTML-->
  <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 </head>
 <body>

  <div class="clearfix" id="page"><!-- column -->
   <div class="position_content" id="page_position_content">
    <div class="clearfix colelem" id="pu69"><!-- group -->
     <div class="browser_width" id="u69"><!-- simple frame --></div>
     <div class="browser_width" id="u70"><!-- simple frame --></div>
    </div>
    <img class="pinned-colelem" id="u71" alt="HIREMIKE" src="images/blank.gif"/><!-- state-based BG images -->
    <div class="clearfix colelem" id="pu78"><!-- group -->
     <div class="browser_width grpelem" id="u78"><!-- simple frame --></div>
     <div class="browser_width grpelem" id="u85"><!-- simple frame --></div>
     <div class="clearfix grpelem" id="u73-4"><!-- content -->
      <p>HEY! I AM GLAD YOU ARE HERE!</p>
     </div>
     <div class="clearfix grpelem" id="u74-4"><!-- content -->
      <p>So you want to see samples of my work, and what I've done. Knock yourself out! I have to bring something to the table, right?</p>
     </div>
     <div class="grpelem" id="u75"><!-- simple frame --></div>
     <a class="nonblock nontext anim_swing clip_frame grpelem" id="u88" href="index.html#skills-chooseone"><!-- image --><img class="block" id="u88_img" src="images/arrow%20down.png" alt="" width="75" height="43"/></a>
    </div>
    <div class="browser_width colelem" id="u107"><!-- simple frame --></div>
    <div class="browser_width colelem" id="u106"><!-- column -->
     <div class="clearfix" id="u106_align_to_page">
      <img class="colelem" id="u125-4" src="images/u125-4.png" alt="Check out what I could help your company with!" width="920" height="45"/><!-- rasterized frame -->
      <div class="colelem" id="u123"><!-- simple frame --></div>
      <div class="clearfix colelem" id="pu132-4"><!-- group -->
       <div class="clearfix grpelem" id="u132-4"><!-- content -->
        <p id="u132-2">WEB DESIGN</p>
       </div>
       <div class="grpelem" id="u120"><!-- simple frame --></div>
       <div class="grpelem" id="u121"><!-- simple frame --></div>
       <div class="grpelem" id="u122"><!-- simple frame --></div>
      </div>
      <div class="colelem" id="u124"><!-- simple frame --></div>
     </div>
    </div>
    <div class="verticalspacer"></div>
    <a class="anchor_item colelem" id="skills-chooseone"></a>
   </div>
  </div>
  <div class="preload_images">
   <img class="preload" src="images/u71-r.png" alt=""/>
   <img class="preload" src="images/web%20design%20thumbnail%20rollover.png" alt=""/>
  </div>
  <!-- JS includes -->
  <script type="text/javascript">
   if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script type="text/javascript">
   window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
  <script src="scripts/museutils.js?3865766194" type="text/javascript"></script>
  <script src="scripts/jquery.tobrowserwidth.js?3842421675" type="text/javascript"></script>
  <script src="scripts/jquery.watch.js?4068933136" type="text/javascript"></script>
  <!-- Other scripts -->
  <script type="text/javascript">
   $(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
$('.browser_width').toBrowserWidth();/* browser width elements */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
   </body>
</html>

I tried to add a transition ease effect in there which did not work. Any suggestions?

6 Answers

mike espn
mike espn
1,072 Points
mike espn
mike espn
1,072 Points

Ayoub AIT IKEN .. Sure.. which link though lol?

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

sorry mike espn , here it is :

http://www.creativejuiz.fr/blog/tutoriels/transitions-css3-mouseover-mouseout

mike espn
mike espn
1,072 Points
mike espn
mike espn
1,072 Points

Yulia Markina Thanks for that reference!

The only issue i am having with that effect is that rather than fading in and out my Hover/Rollver over image

It does the ENTIRE element.

I tried for 4 hours straight lol. Is there anyway to get the background image of the HOVER state to fade in and out?

Like.....

img:hover {
prop: value;
prop: value;
Background: url("mypic.png");  <--------- This needs to fade in and out
}
Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

so here if you hover your mouse over an (img), another image appears, right? It will hover over the entire element unless you target only a part of your div inside the div with the image. Or I didn't get your idea :)

mike espn
mike espn
1,072 Points
mike espn
mike espn
1,072 Points

Yulia Markina Yes! That's exactly what i am trying to do. In short - it's a normal roll over effect , but rather than it being a css shape it's an image that i want to hover in.

I just do not know how to target the opacity of the background image of the hover state without effecthing the entire element.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

hey ! check out this link :)