Changing an image on hover while scaling it

Question

I need to get the image to change onmouseenter/hover to a different image. I looked around and found a lot of rollover solutions but that won't work for me because I need to scale the image on hover as well.

Also the last image in #recent appears to be broken, hovering over the #galleries section has a link to it and i can't figure out if that is because of col-md-offset-1 or something else.

<body>
  <div id="wrap">

    <div id="topbar">
    </div>

    <div id="menu">
    </div>

    <div id="logo">
    </div>

    <div id="jumbotron">
    </div>

    <div id="recent">
      <h1>Recent Work</h1>
      <div class="col-md-2 col-md-offset-1">
        <a href="http://shniper1337.github.io/firstbootstrap/">
          <img src="images/firstbootstrap.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.github.io/pong/">
          <img src="images/pong.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Photomontage-490696483">
          <img src="images/design.png" class="img-rounded"></a>
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Website-design-WIP-571887134">
          <img src="images/survivingearth.png" class="img-rounded">
      </div>
      <div class="col-md-2">
        <a href="http://shniper1337.deviantart.com/art/Old-Law-Firm-545208961">
          <img src="images/lawfirm.png" class="img-rounded">
      </div>
    </div>

    <div id="galleries">
      <div class="row">
        <div class="col-md-4">
          <h2>Website Design</h2>
          <p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
        </div>

        <div class="col-md-4">
          <h2>Software Engineering</h2>
          <p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
        </div>

        <div class="col-md-4">
          <h2>Other Work</h2>
          <p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
        </div>
      </div>
    </div>

    <div id="sn">
    </div>

    <div id="footer">
    </div>

  </div>

</body>


body {
  background-color: #EAE8EB;
}

wrap {
  margin: auto;
}

#topbar {
  width: 100%;
  height: 50px;
  background-color: #000;
  margin-top: -10px;
}

#jumbotron {
    width: 100%;
    height: 750px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}

#recent {
    margin: auto;
    background-color: #3C5F7C;
    width: 100%;
    height: 250px;
    margin-top: -20px;
}

#recent h1 {
    text-align: center;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 38px;
    font-weight: 700;
    padding-top: 10px;
    color: #EEF0F2;
}

#recent img {
    height: 155px;
    box-shadow: 5px 5px 5px #111111;
    margin-top: 10px;
    position: relative;
}

#galleries {
    background-color: #3c5f7c;
    height: 200px;
}

.col-md-4 {
    max-width: 27%;
    margin-left: 3%;
}

.row {
    margin-left: 6%;
}

#recent div:nth-of-type(1) img:hover {
    background-image: url("images/firstbootstrapfull.png"); 
    z-index: 1;
    position: relative; 
}

#recent div:nth-of-type(2) img:hover {

}

#recent div:nth-of-type(3) img:hover {

}

#recent div:nth-of-type(4) img:hover {

}

#recent div:nth-of-type(5) img:hover {

}

#galleries h2 {
    font-size: 32px;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 500;
    color: #EEF0F2;
}

#galleries div:nth-of-type(1) h2 {
    text-align: right;
}
#galleries div:nth-of-type(2) h2 {
    text-align: center;
}

#galleries div:nth-of-type(3) h2 {
    text-align: left;
}

#galleries p {
    font-size: 18px;
    font-family: 'Catamaran', sans-serif;
    font-weight: 300;
    color: #eef0f2;
}

#galleries div:nth-of-type(1) p {
    text-align: right;
    margin: auto;
}

#galleries div:nth-of-type(2) p {
    text-align: center;
    margin: auto;
}

#galleries div:nth-of-type(3) p {
    text-align: left;
    margin: auto;
}

#footer {
  width: 100%;
  height: 20px;
  background-color: #000;
}

Here is a jsfiddle that appears to be broken

Solving this with css is preferred but not necessary.

You're trying to do two things at the same time and it's not clear what. Do you want to scale the first image AND the second. You want the first image to *start* scaling and somehow the second would come in and continue the scale? Please clarify. — Paulie_D, Feb 10 '16 at 12:02
When the first image is hovered over I want it to change to the second image and the second image be scaled because the first image is basically a thumbnail of the full image. — Shniper, Feb 10 '16 at 12:05
If you're swapping out *inline* images you'll need javascript. — Paulie_D, Feb 10 '16 at 12:05

score 2 · Answer 1 · answered Feb 10 '16 at 11:56

2

You could add in something like this to your CSS

#randomDiv {
 background-image: url('image.png');
 height: 70px;
 width: 120px;
}

#randomDiv:hover {
 background-image: url('differenthoverimage.png');
 width: 50px; // or whatever width you want
 height: 50px; // or whatever height you want
}

And that should change the image and height/width.

(make sure to add a different id for each image you want to do this and set it in the HTML)

answered Feb 10 '16 at 11:56

Timble

499
4
15

I've tried that, it just changes the width and height of the original image on hover. Is that because I link the image in the html? – Shniper Feb 10 '16 at 11:59
If you use this solution, you don't need to set the image in the HTML, you only get the div you want to have an image change and scale an ID, and set it accordingly in the CSS. What this solution does is changes the source and size of the background image not the actual image in the HTML, but depending on how you implement it, the background image can appear as a regular image. If you want to change the source of an actual image attribute, you would need to use JS to change the source and JS again to change the className to scale the image if you want to do both. – Timble Feb 10 '16 at 12:03
Check out this similar question for more info http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover – Timble Feb 10 '16 at 12:08
what is the easiest way to do this with multiple images. – Shniper Feb 10 '16 at 12:58

Changing an image on hover while scaling it

1 Answers1