Hover image with CSS / HTML

Question

Hover image with CSS / HTML

I have this problem when I set the image to display another image when hovering over the mouse, however the first image still appears and the new one does not change the height and width and overlaps the other. I'm still pretty new to HTML / CSS, so I might have missed something simple. Here is the code:

<img src="LibraryTransparent.png" id="Library">

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

+71

html css image hover

user2704743 Sep 15 '13 at 14:08

source share

20 answers

Another option is to use JS:

 <img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

+94

kurdtpage Jul 14 '14 at 20:48

source share

What I usually do is that I create a double image with both states, acting as a kind of two-frame film, which I then use as the background for the original element, so that the element has the width / height specified in pixels, resulting in only one half of the image is displayed. Then, what determines the hang state is basically "move the movie to show another frame."

For example, imagine that the image should be a gray Tux, which we need to change to a colorful Tux on hover. And the “hosting” element is a range with the identifier “tuxie”.

I create 50 x 25 images with two Tuxes, one in color and the other gray,
then set the image as background for the 25 x 25 range,
and finally set the hover to just move the background 25px to the left.

Minimum Code:

 <style> #tuxie { width: 25px; height: 25px; background: url('images/tuxie.png') no-repeat left top; } #tuxie:hover { background-position: -25px 0px } </style> <div id="tuxie" />

and image:

Two-frame Tuxie "film"

Benefits:

Having placed both frames in one file, it will ensure their loading once. This avoids the ugly crash on slower connections, when another frame never loads immediately, so hovering never works properly at first.
Perhaps it’s easier for you to manage your images, since “paired” frames are never embarrassed.
Using a smart Javascript or CSS selector, you can extend this and include even more frames in a single file.
In theory, you could even place several buttons in one file and control their display by coordinates, although this approach can quickly get out of hand.

Note that this is built using the CSS background property, so if you really need to use with <img /> s, you should not set the src property, as this overlaps the background. (Think that clever use of transparency here can lead to interesting results, but probably very much depends on image quality, as well as on the engine.).

+50

Alois Mahdal Nov 14 '13 at 0:09

source share

Use content :

 #Library { height: 70px; width: 120px; } #Library:hover { content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg'); height: 70px; width: 120px; }

Jsfiddle

+32

Vucko Sep 15 '13 at 14:12

source share

 .hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */ .hide {display:none} /* Do the shift: */ .hover_image:hover img:first-child{display:none} .hover_image:hover img:last-child{display:inline-block}

 <body> <a class="hover_image" href="#"> <!-- path/to/first/visible/image: --> <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" /> <!-- path/to/hover/visible/image: --> <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" /> </a> </body>

To improve on this nice Rashid answer, I add a few comments:

The trick is performed on top of the wrapper of the image to be replaced (this time the 'a' tag, but possibly another), so the hover_image class was placed there.

Benefits:

Keeping both image URLs in the same place helps if you need to change them.
It looks like working with old navigators (CSS2 standard).
He himself explains.
The guidance image is pre-configured (no freeze).

+5

Darío Pm Aug 06 '16 at 14:02

source share

The problem with all the previous answers is that the hover image does not load the page, so when the browser calls it, it takes time to load, and all this does not look very good.

What I am doing is that I put the original image and the hover image in 1 element and first hide the hover image. Then, when hovering in, I display the hover image and hide the old one, and when I hover over, I do the opposite.

HTML:

 <span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')"> <img src="stylesheets/images/bell.png" class=bell col="g"> <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b"> </span>

JavaScript / jQuery:

 function hvr(dom, action) { if (action == 'in') { $(dom).find("[col=g]").css("display", "none"); $(dom).find("[col=b]").css("display", "inline-block"); } else { $(dom).find("[col=b]").css("display", "none"); $(dom).find("[col=g]").css("display", "inline-block"); } }

This is for me the easiest and most effective way to do this.

+4

Y2H Nov 12 '15 at 9:00

source share

You can replace the HTML IMG image without having to make any changes to the background image in the container div.

This is obtained using the CSS box-sizing: border-box; property box-sizing: border-box; (It gives you the ability to effectively impose a hover effect on <IMG> .)

To do this, apply a class to this image:

 .image-replacement { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */ width: 180px; height: 236px; padding-left: 180px; }

Sample code: http://codepen.io/chriscoyier/pen/cJEjs

Original article: http://css-tricks.com/replace-the-image-in-an-img-with-css/

Hope this helps some of you guys who don’t want to put a div to get an image that has a “freeze” effect.

Passing an example code here:

HTML:

 <img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

JQuery

 $("#myImage").mouseover(function () { $(this).attr("class", "image-replacement"); }); $("#myImage").mouseout(function () { $(this).attr("class", "ClassBeforeImage-replacement"); });

+3

Nishanth Shaan Nov 24 '13 at 20:29

source share

You cannot use CSS to change the attributes of an SRC image (if the browser does not support it). You can use jQuery with a hover event.

 $("#Library ").hover( function () { $(this).attr("src","isHover.jpg"); }, function () { $(this).attr("src","notHover.jpg"); } );

+2

Asaf Sep 15 '13 at 14:14

source share

Change the img tag to a div and give it a background in CSS.

+1

Jacques ジャック Sep 15 '13 at 14:11

source share

The problem is that you set the first image through the 'src' attribute, and when you hover over the image, a background image is added. try the following:

in html:

 <img id="Library">

then in css:

 #Library { height: 70px; width: 120px; background-image: url('LibraryTransparent.png'); } #Library:hover { background-image: url('LibraryHoverTrans.png'); }

0

Tomzan Sep 15 '13 at 14:10

source share

check fiddle

I think the image path may be wrong in your case

the syntax looks right

 background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');

0

Vignesh Subramanian Sep 15 '13 at 14:14

source share

In the way you do things, this will not happen. You change the background image of the image, which is blocked by the original image. Changing the height and width will also not happen. To change the src attribute of an image, you will need a Javascript or Javascript Library like jQuery. However, you can change the image to a simple div (text) and create a background image that changes when you hover, even if the div is empty. Here is how.

 <div id="emptydiv"></div> #emptydiv { background-image: url("LibraryHover.png"); height: 70px; width: 120px;

}

 #emptydiv:hover { background-image: url("LibraryHoverTrans.png"); height: 700px; width: 1200px; }

Hope this is what you are asking for :)

0

Daniel Schwarz Sep 15 '13 at 14:15

source share

Each response using the background-image option does not have one attribute. Height and width specify the size of the container for the image, but will not change the size of the image itself. The background size is needed to compress or stretch the image in accordance with this container. I used the example from the "best answer"

 <div id="Library"></div> #Library { background-image: url('LibraryTransparent.png'); background-size: 120px; height: 70px; width: 120px; } #Library:hover { background-image: url('LibraryHoverTrans.png'); }

0

Fi Horan Dec 05 '14 at 10:51

source share

try one of them

 <img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

or if you use a button-shaped image

 <input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()"> function fnover() { var myimg2 = document.getElementById("proceed"); myimg2.src = "images/icons/proceed_button2.png"; } function fnout() { var myimg2 = document.getElementById("proceed"); myimg2.src = "images/icons/proceed_button.png"; }

0

Adiii Nov 04 '15 at 1:57

source share

My jquery solution.

 function changeOverImage(element) { var url = $(element).prop('src'), url_over = $(element).data('change-over') ; $(element) .prop('src', url_over) .data('change-over', url) ; } $(document).delegate('img[data-change-over]', 'mouseover', function () { changeOverImage(this); }); $(document).delegate('img[data-change-over]', 'mouseout', function () { changeOverImage(this); });

and html

 <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

Demo: JSFiddle demo

Hello

0

iBet7o Feb 04 '16 at 10:57

source share

Live Example: JSFiddle

The accepted answer has some problems. Image has not been resized. Use the background-size property to resize the image.

HTML:

 <div id="image"></div>

CSS

 #image { background-image: url('image1'); background-size: 300px 390px; width: 300px; height:390px; } #image:hover{ background: url("image2"); background-size: 300px 390px; }

0

Md. Rafee Apr 26 '16 at 6:07

source share

 .foo img:last-child{display:none} .foo:hover img:first-child{display:none} .foo:hover img:last-child{display:inline-block}

 <body> <a class="foo" href="#"> <img src="http://lojanak.com/image/9/280/280/1/0" /> <img src="http://lojanak.com/image/0/280/280/1/0" /> </a> </body>

0

Rashid Jun 27 '16 at 7:44

source share

I would recommend using only CSS if possible. My solution would be:

HTML:

 <img id="img" class="" src="" />

CSS

 img#img{ background: url("pictureNumberOne.png"); background-size: 100px 100px; /* Optional transition: */ transition: background 0.25s ease-in-out; } img#img:hover{ background: url("pictureNumberTwo.png"); background-size: 100px 100px; }

That (not defining the src attribute) also guarantees the correct display of transparent images (or images with transparent parts) (otherwise, if the second image is translucent, you will also see parts of the first image).

The background-size attribute is used to set the height and width of the background image.

If (for some reason) you do not want to change the bg-image of the image, you can also put the image in a div container as follows:

HTML:

 <div id="imgContainer" class=""> <img id="" class="" src="" /> </div>

... etc.

0

user0800 Jul 12 '17 at 13:08

source share

Just use Photoshop and create two identical images, the first how you want it to look, and the second how you want it to look when it freezes. I wrap the image in the <a> tag because I assume this is what you want. In this example, I am making a facebook icon that is desaturated, but when it hangs over it, the blue color of facebook will be displayed.

 <a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

-one

Phong Ly Dec 01 '15 at 9:28

source share

Here is a simple trick. Just copy and paste it.

 <!DOCTYPE html> <html lang="en"> <head> <title>Change Image on Hover in CSS</title> <style type="text/css"> .card { width: 130px; height: 195px; background: url("../images/card-back.jpg") no-repeat; margin: 50px; } .card:hover { background: url("../images/card-front.jpg") no-repeat; } </style> </head> <body> <div class="card"></div> </body> </html>

-one

Lokesh Thakur Jun 20 '17 at 18:50

source share

Aurelio De Rosa · Accepted Answer · 2013-09-15 14:10

One solution is also to use the first image as a background image as follows:

 <div id="Library"></div>

 #Library { background-image: url('LibraryTransparent.png'); height: 70px; width: 120px; } #Library:hover { background-image: url('LibraryHoverTrans.png'); }

If your image has a different size, you should set it like this:

 #Library:hover { background-image: url('LibraryHoverTrans.png'); width: [IMAGE_WIDTH_IN_PIXELS]px; height: [IMAGE_HEIGHT_IN_PIXELS]px; }

Hover image with CSS / HTML

More articles: