CSS: Alterar src de imagem em img: hover

Eu preciso mudar o <img>URL da fonte em hover.

Eu tentei isso, mas não funcionou:

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Qualquer ajuda seria apreciada.

Atualizar:

Isso só funciona para Webkit / Google Chrome.

Com apenas html e css, não é possível alterar o src da imagem. Se você substituir a tag img pela tag div, poderá alterar a imagem que está definida como plano de fundo, como

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

E se você acha que pode usar algum código javascript, então você deve ser capaz de alterar o src da tag img como abaixo

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);" />

Eu modifiquei algumas mudanças relacionadas a Patrick Kostjens.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

Eu tive um problema semelhante, mas minha solução foi ter duas imagens, uma oculta (exibição: nenhuma) e outra visível. Ao passar o mouse sobre uma extensão circundante, a imagem original muda para exibir: nenhuma e a outra imagem para exibir: bloco. (Pode ser usado 'embutido' em vez disso, dependendo das circunstâncias)

Este exemplo usa duas tags span em vez de imagens para que você possa ver o resultado ao executá-lo aqui. Eu não tinha nenhuma fonte de imagem online para usar, infelizmente.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

O que você pode fazer é trapacear um pouco definindo widthe heightcomo 0 para ocultar a imagem real e aplicar algum CSS para fazer o que quiser:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

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

E o preenchimento torna a imgtag do tamanho que você deseja (metade do tamanho da sua imagem real).

Violino

Aqui está uma abordagem alternativa usando CSS puro. A ideia é incluir ambas as imagens na marcação HTML e exibi-las ou ocultá-las em: hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

Observe que as imagens usadas são das mesmas dimensões para exibição adequada. Além disso, esses tamanhos de arquivo de imagem são muito pequenos, portanto, carregar vários não é um problema neste caso, mas pode ser se você estiver procurando alternar a exibição de imagens de tamanho grande.

Quanto à semântica, não gosto de nenhuma solução dada até agora. Portanto, eu pessoalmente uso a seguinte solução:

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

Esta é uma solução CSS apenas com boa compatibilidade de navegador. Faz uso de um invólucro de imagem que possui um fundo inicialmente oculto pela própria imagem. Ao passar o mouse, a imagem fica oculta pela opacidade, portanto, a imagem de fundo fica visível. Dessa forma, não se tem um invólucro vazio, mas uma imagem real no código de marcação.

Eu tenho mais uma solução. Se alguém usa AngularJs: http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

O Javascript:

function ctrl($scope){
    $scope.img= '000';
}

Sem CSS ^^.

Tive um problema semelhante - desejo substituir a imagem em: pairar, mas não consigo usar BACKGRUND-IMAGE devido à falta de design adaptativo do Bootstrap.

Se você gosta de mim, quer apenas mudar a imagem: passe o mouse (mas não insista em mudar o SRC para a marca de imagem certa), você pode fazer algo assim - é uma solução somente CSS.

HTML:

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS:

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

Se você quiser um código compatível com o IE7, pode ocultar / mostrar: Imagem HOVER posicionando, não por opacidade.

Já que você não pode alterar o srccom CSS: Se jQuery for uma opção para você, verifique este violino.

Demo

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

Basicamente está usando o .hover() método ... são necessárias duas funções para fazê-lo funcionar. Quando você entra no hover e quando você sai dele.

Estamos usando o .attr(abreviação de atributo) para alterar osrc atributo.

Vale a pena notar que você precisa da biblioteca jQuery incluída como no violino para fazer este trabalho.

Violino

Concordo com a resposta de AshisKumar,
há uma maneira de alterar o url da imagem ao passar o mouse usando a funcionalidade jQuery conforme abaixo:

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

Pessoalmente, eu escolheria uma das soluções JavaScript / jQuery. Isso não apenas mantém sua semântica HTML (ou seja, uma imagem é mostrada como um elemento img com sua imagem src usual definida na marcação), mas se você usar uma solução JS / jQuery, também será capaz de usar o JS / jQuery para pré - carregar sua imagem hover.

O pré-carregamento da imagem flutuante significa que provavelmente não haverá atraso no download quando o usuário passar o mouse sobre a imagem original, fazendo com que seu site se comporte de maneira muito mais profissional.

Isso significa que você depende de JS, mas a pequena minoria que não tem JS habilitado provavelmente não vai se preocupar muito - e todos terão uma experiência melhor ... e seu código também será bom!

Você não pode alterar imgo srcatributo da tag usando CSS. Possível usando manipulador de eventos Javascript onmouseover() .

HTML:

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

Javascript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Você não pode alterar o img src usando css. Você pode usar a seguinte solução de css puro. HTML:

<div id="asks"></div>

CSS:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Ou, se não quiser usar um div com uma imagem de fundo, você pode usar uma solução javascript / jQuery. Html:

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Para isso você pode usar o código abaixo

1) html

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

Em navegadores mais antigos, :hoverfuncionava apenas em <a>elementos. Então você teria que fazer algo assim para fazê-lo funcionar.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

O código a seguir funciona no Chrome e no Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

Aqui está uma solução CSS pura. Coloque a imagem visível na tag img, coloque a segunda imagem como fundo no css e, em seguida, oculte a imagem ao pairar.

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

A melhor maneira de alterar srca imagem é:

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Veja a demonstração ao vivo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Aproveitar!

Experimente este código.

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

Existe outra maneira simples de usar apenas HTML e CSS!

Basta envolver sua <img>tag com div assim:

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

Em seguida, em seu arquivo CSS, oculte o img e defina a imagem de fundo para o elemento div de envolvimento:

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

Et voilà!