How do you do an image rollover using html/css?

Question

Im currently in the process of building a website for my graphic design work. On my home page Ive got a selection of images showing my work. I want to be able to hover over the images so they have an overlay showing the name of the project and what category it comes under. Ive researched that you can do this using html, using the following code -

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
       onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
       onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
    </img>
</a>

however when i tried this, it didn't work on the preview, I've already heard that this method can cause problems and is pretty old school.

Ive also read that you can use CSS method by creating an image with the two images you want rolling over next to each other.

However if i do it this way will it be easy to put text over the rollover, as well as links. For example on the roller over image I will make the text using HTML and links, but is this easy to do using the CSS method?

Here is a website that uses this method -

http://www.equisgarcia.com

Might I suggest a classic: http://alistapart.com/article/sprites — Will, Mar 14 '14 at 16:41
possible duplicate of [How to show text on image when hovering?](http://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering) — Chris W., Mar 14 '14 at 16:41
hm i would solute it with `jquery` and a `onmouseover` `function`. For example add a `span` with `style='display:none;` with your caption in it. in your jquery function you use the `slideUp` `slideDown` function. — GoE, Mar 14 '14 at 16:42
There is no need of JavaScript for this. If you start using JavaScript for simple tasks as this, you end up with an unnecessarily complex page. — Hector Ordonez, Mar 14 '14 at 17:03

Hector Ordonez · Answer 1 · 2014-03-14T17:10:39.617

There are multiple approaches to this issue, depending always on your needs.

I made a fiddle using only CSS with one of the approaches, you can see it working here.

All you you need is:

1) Define a parent element "parentExample" containing the image and the text with a size. 2) Define image "imageExample" and text "textExample" to cover all the parent size and set the text to be hidden by default. 3) Define a hover "parentExample:hover" in which image is hidden and text display.

.parentExample {
    height: 400px;
    width: 400px;
}
.imageExample {
    height: 100%;
    width: 100%;
}
.textExample {
    height: 100%;
    width: 100%;
    display: none;
}

.parentExample:hover .imageExample {
    display: hidden;
}
.parentExample:hover .textExample {
    display: block;
}

score 1 · Answer 2 · answered Mar 15 '14 at 07:16

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; }

score 0 · Answer 3 · answered Mar 14 '14 at 16:47

This is how the first figure image on the site is done in HTML:

<html>
<head>
<title></title>
</head>

<body>
    <div id="pr_contain_item_7129129">
        <a class="nohover" href="/New-Year-s-Card" id="p7129129" name=
        "equisgarcia" onfocus="this.blur()" onmouseout=
        "this.className='nohover';" onmouseover="this.className='hover';" rel=
        "history"></a>

        <div class="loader_holder" id="load_7129129"><img src=
        "/_gfx/loadingAnim.gif"></div>

        <div class="cardimgcrop" id="cardthumb_7129129"><img border="0"
        data-hi-res=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506_2x.jpg"
        height="169" src=
        "http://payload241.cargocollective.com/1/8/281332/7129129/prt_300x169_1390152506.jpg"
        width="300"></div>

        <div class="thumb_title">
            <span class="text">New Year's Card</span>&nbsp;
        </div>

        <div class="excerpt">
            Fig.ω
        </div>

        <div class="thumb_tag">
            <span class="text"><a href=
            "http://www.equisgarcia.com/filter/Lettering">Lettering</a>,
            <a href=
            "http://www.equisgarcia.com/filter/Print">Print</a>&nbsp;</span>
        </div>
    </div>
</body>
</html>

score 0 · Answer 4 · edited Aug 16 '17 at 17:30

0

You an use sprites; in CSS using background-position-x, -y properties.

<div class="image"></div>

CSS:

div.class {
    background-image: url('../img/image.jpg'); 
}

div.class:hover {
    background-x: -100px;
}

Providing you have a sprite image created (two or more images in one). On hover you are actually offsetting your image by 100px to show the other image.

edited Aug 16 '17 at 17:30

Alex Hadley

2,125
2
28
50

answered Mar 14 '14 at 16:51

Mareks

135
1
2
12

score 0 · Answer 5 · 2014-03-15T06:33:04.293

you can simply do this with javascript and html and also with css and as follows:

<html>
    <style type="text/css">
        #sam{
            height: 100px;
            width: 100px;
background-color:#ccc;
        }
        #sam:hover{
            background-color: #eee;
        }
    </style>
<head>

    <script type="text/javascript">

        var change = function(){
            var x = document.getElementById("sam");
            x.innerHTML = "this is new";

        }
        var changeanother = function(){
            var x = document.getElementById("sam");
            x.innerHTML = " ";
        }   
    </script>
</head>
<body>
    <div id="div2"></div>
    <div id="sam" onmouseover="change();" onmouseout="changeanother();"> </div>
</body>
</html>

futrher using innerHTML helpes you to gave more controls over your tag.

you can also use img tage insted of a div tag.

as you wish

electricity had gone at the time i was writing but this is fully functional and you can copy this code and test and you will get expected result. thanks to be pollite . and yes i have done as you have use events that is `onmouseover` and `onmouseout` — , Mar 15 '14 at 06:23

How do you do an image rollover using html/css?

5 Answers5