CODEWITHSUNDEEP
htmlcssimagehover
user1535882
user1535882

Reputation: 119

Change image and text on hover and click

I have one image and text that goes along with it to the side and i want to change both of these at the same time on hover or by clicking on the image.

I can manage to get the image and the text to swap separately but not both.

HTML

<body>
<div id="page-container">
    <div class="box-container">
        <div class="image-container">
            <a href="#"><img src=".jpg" height="100" width="200"/></a>
        </div>
        <div class="second-image-container">
            <a href="#"><img src=".jpg" height="100" width="200"/></a>
        </div>
        <div id="text">
            <div id="text-box">
                <p>This is some text</p>

                <p id="more-text">This is some more text</p>
            </div>
        </div>
        <div id="text-two">
            <div id="text-box-two">
                <p>This is some text</p>

                <p id="even-more-text">This is some more text</p>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</body>
</html>

CSS

div#text {
    position: absolute;
    background-color: black;
    width: 350px;
    height: 300px;
    top: 10px;
    right: -65px;
}

div#text p {
    position: absolute;
    color: white;
    top: 100px;
    left: 125px;
}

div#text-box p {
    background-color: blue;
    width:
}

div#text-box p#more-text {
    background-color: red;
    top: 65px;
    left: 90px;
}

div.image-container {
    opacity: 1;
    position: absolute;
    z-index: 500
}

div.second-image-container {
    position: absolute;
    top:;
    opacity: 1;
    z-index: 119
}

div#text-two {
    position: absolute;
    background-color: black;
    width: 350px;
    height: 300px;
    right: -65px;
    top: 10px;
}

div#text-box-two p {
    position: absolute;
    background-color: blue;
    z-index: 10
}

div#text-box-two p#more-text {
    background-color: red;
}

    /*and the CSS that makes each individual image and text to swap:*/
div.image-container:hover, div#text:hover {
    opacity: 0
}

Upvotes: 1

Views: 12981

Answers (5)

davidcondrey
davidcondrey

Reputation: 36003

An image

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

On hover display a different image

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }

Upvotes: 0

Lodewijk
Lodewijk

Reputation: 100

My 2 cents on how to create an image with a text below it, where hovering either one will lift the image up by 15px. The text stays in its own place. Taken directly from my website so may need editing for your personal use.

CSS:

.menu_imgdiv
{
    display:inline-block;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
}

.menu_imgdiv p
{
    padding-top:4px;
    text-align:center;
    font-size:larger;
}

.menu_img
{
    width:128px;
    height:128px;
}

.menu_imgdiv:hover .menu_img,
.menu_imgdiv:hover .menu_imgdiv p
{
    margin: -15px 0px 15px;
}

And the HTML:

<div id="tm_header">  
    <a href="#/"> <div class="menu_imgdiv"> 
    <img class="menu_img" src="images/home.png" />
    <br /> <p>Homepage</p>  </div> </a>
</div>

Upvotes: 2

Ana
Ana

Reputation: 37179

This works on click http://dabblet.com/gist/3138537

Upvotes: 2

Dom
Dom

Reputation: 2325

You could make the text and image into one image with the image you want it to turn into below (in the same jpeg, gif or png), then use the :hover function to change the background position of the image.

The css would be: 

div.imagecontainer {
width:50px;/*be sure to specify a height & width*/
height:50px;
background:url(images/example.jpeg);
background-position:0px 0px;
overflow:hidden;
}

div.imagecontainer:hover {
background-position:0px -50px;
}

This would then eliminate the need for a second image. If you use this technique be sure to add a paragraph element with the text you were going to have written there and use either visibility:hidden; z-index:-100; or text-indent:1000px; with overflow:hidden; to hide it.

Upvotes: 1

DOCbrand
DOCbrand

Reputation: 339

Instead of trying to do this on the hover of each individual divs (image-container and text), change the opacity on the hover of the containing div (box-container). CSS would look like this:

.box-container:hover .image-container,
.box-container:hover #text {
    opacity: 0;
}

Upvotes: 5

Related Questions