CODEWITHSUNDEEP
javascriptcsshtmltwitter-bootstrap
user2457563
user2457563

Reputation: 171

Change multiple images/elements on hover for overlayed images HTML

I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).

So right now, I have this right now:

<div style="position:relative;">
    <a href="#games">
        <img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
        <img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
        <img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
    </a>
</div>

Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.

How can I do this in JS/HTML/etc?

Upvotes: 0

Views: 4126

Answers (3)

ChrisP
ChrisP

Reputation: 5942

Based on your comment to Learner's answer, here is an example of the idea you are describing:

HTML:

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

CSS:

.outer {
    width: 304px;
    height: 304px;
    background-color: black;
}
.inner {
    float: left;
    width: 150px;
    height: 150px;
    background-color: red;
    border: 1px solid black;
    display: none;
}
.outer:hover .inner {
    display: block;
}

DEMO

Upvotes: 1

David Gilbertson
David Gilbertson

Reputation: 4863

If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.

<div class="card">
  <div class="no-hover">
    stuff you want to show when the user is just looking
  </div>
  <div class="on-hover">
    stuff you want to show when the user hovers
  </div>
</div>

CSS:

.no-hover {
  display: block;
}
.on-hover {
  display: none;
}
.card:hover > .on-hover {
  display: block;
}
.card:hover > .no-hover {
  display: none;
}

It's extra HTML elements, but might be easier to maintain.

Upvotes: 1

Learner
Learner

Reputation: 4004

If you are trying to achieve something like this: http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm

Here's your solution: http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/

Upvotes: 0

Related Questions