CSS: Image Link, Change on Hover

CSS: image link, change on hover

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

use a class for the link itself and forget the div

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}

How to change source of img tag on hover?

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');}
function unhover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

change image link when hover the link css

You can completely remove the img because you add the efect via CSS on the a tag.

HTML

<a href="" class="image_link"></a>

CSS

.image_link{
    display:block;
    width:800px;
    height:600px;
    background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}

.image_link:hover {
    display:block;
    width:800px;
    height:600px;
    background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}

JSFiddle.

Note that you must add dispay:block/inline-block to the a

Looking to switch image when I hover over a link

You can use javascript to change the img src when you hover over the link. And set it back when you leave.

First give your elements some ID:

<img  id ="home-img"src="images/home_dark.png" alt="">                                                                                   
<a id ="home" href="#">home</a>

Then listen for the events:

document.getElementById("home").onmouseenter = function() {
  document.getElementById("home-img").src = "other/img.png"
}
document.getElementById("home").onmouseleave = function() {
  document.getElementById("home-img").src = "images/home_dark.png"
}

Changing the color of an image link on hover

Give a background color to your A element,

than on .imglink:hover img{ } handle the image opacity

An example would be:

DEMO

a.imglink{
  background:         #000;
  display:            inline-block;
}
a.imglink img{
  vertical-align:     middle;
  transition:         opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
a.imglink:hover img{
  opacity:            0.5;
}

Changing image on hover with CSS/HTML

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

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

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

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

If your hover image has a different size, you've got to set them like so:

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

CSS change image as hover over image with a link

If you want to make a link to a home page you should change this

<div id="homebutton">
 <img src="homelogo.png" alt="tut" width="23" height="23px">
</div>

to:

<a href="home.html" id="homebutton">home</a>

Note:
You should just specify in the :hover the property you want to change, also I recommend the use of class for this instead ID

#homebutton{
  text-indent: -19999px;/*to hide the Home text in the link*/
  top:6%;
  left:0.5%;
  position:fixed;
  background-image: url('homelogo.png');
  height: 23px;
  width: 23px;
}

#homebutton:hover{
  background-image: url('homelogohover.png');
}

Image change on hover of different links

Even if you can do that with CSS it's going to be pretty messy. Why not use jQuery or Javascript instead?

In jQuery, try using the .hover() mouse event.

You'll probably start with something like this (psuedo-code):

$(".linkclass").hover(
  function () {
    $(.imageclass).css('background-image','image.jpg');
  },
  function () {
    $(.imageclass).css('background-image','image2.jpg');
  }
);

---

Related Topics