Как изменить изображение при наведении курсора html

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn’t change height and width and overlaps the other one. I’m still pretty new to HTML/CSS so I may 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;
}

asked Sep 15, 2013 at 14:08

Another option is to use JS:

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

answered Jul 14, 2014 at 20:48

kurdtpagekurdtpage

3,0421 gold badge23 silver badges24 bronze badges

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

TylerH

20.5k62 gold badges75 silver badges97 bronze badges

answered Sep 15, 2013 at 14:10

Aurelio De RosaAurelio De Rosa

21.7k8 gold badges47 silver badges71 bronze badges

What I usually do is that I create a double image with both states, acting like kind of a two-frame film which I then use with as background for the original element so that the element has width / height set in pixels, resulting in showing only one half of the image. Then what the hover state defines is basically «move the film to show the other frame».

For example, imagine that the image has to be a gray Tux, that we need to change to colorful Tux on hover. And the «hosting» element is a span with id «tuxie».

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

The minimal 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 the image:

Advantages are:

By putting both frames in one file, it’s ensured that they are loaded
at once. This avoids the ugly glitch on slower connections when the
other frame never loads immediately, so first hover never works properly.
It may be easier to manage your images this way since «paired» frames
are never confused.
With smart use of Javascript or CSS selector, one can extend this and
include even more frames in one file.

In theory you could put even multiple buttons in single file and govern
their display by coordinates, although such approach could get quickly
out of hand.

Note that this is built with background CSS property, so if you really need to use with <img />s, you must not set the src property since that overlaps the background. (Come to think that clever use of transparency here could lead to interesting results, but probably very dependent on quality of image as well as of the engine.).

answered Nov 14, 2013 at 0:09

Alois MahdalAlois Mahdal

10.4k7 gold badges51 silver badges69 bronze badges

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

answered Sep 15, 2013 at 14:12

VuckoVucko

20.4k9 gold badges56 silver badges106 bronze badges

.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 try to improve this Rashid’s good answer I’m adding some comments:

The trick is done over the wrapper of the image to be swapped (an ‘a’ tag this time but maybe another) so the ‘hover_image’ class has been put there.

Advantages:

Keeping both images url together in the same place helps if they need to be changed.
Seems to work with old navigators too (CSS2 standard).
It’s self explanatory.
The hover image is preloaded (no delay after hovering).

answered Aug 6, 2016 at 14:02

Darío PmDarío Pm

1311 silver badge8 bronze badges

The problem with all the previous answers is that the hover image isn’t loaded with the page so when the browser calls it, it takes time to load and the whole thing doesn’t look really good.

What I do is that I put the original image and the hover image in 1 element and hide the hover image at first. Then at hover in I display the hover image and hide the old one, and at hover out 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 to me is the easiest and most efficient way to do it.

answered Nov 12, 2015 at 9:00

Y2HY2H

2,3691 gold badge18 silver badges37 bronze badges

You can replace the image of an HTML IMG without needing to make any background image changes to the container div.

This is obtained using the CSS property box-sizing: border-box; (It gives you a possibility to put a kind of hover effect on an <IMG> very efficiently.)

To do this, apply a class like this to your 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 will help some of you guys who don’t want to put a div to obtain an image having a «hover» effect.

Posting here the sample code:

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

answered Nov 24, 2013 at 20:29

.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>

answered Jun 27, 2016 at 7:44

You can’t use CSS to change image SRC attributes (unless the browser supports it).
You may want to use jQuery with the hover event.

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

answered Sep 15, 2013 at 14:14

AsafAsaf

5571 gold badge7 silver badges15 bronze badges

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

answered Sep 15, 2013 at 14:11

Jacques ジャックJacques ジャック

3,6522 gold badges19 silver badges43 bronze badges

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 using image as a button in form

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

answered Nov 4, 2015 at 1:57

AdiiiAdiii

51.2k6 gold badges136 silver badges137 bronze badges

check this 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');

answered Sep 15, 2013 at 14:14

The problem is that you set the first image through ‘src’ attribute and on hover added to the image a background-image.
try this:

in html use:

<img id="Library">

then in css:

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

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

answered Sep 15, 2013 at 14:10

TomzanTomzan

2,76814 silver badges25 bronze badges

In the way that you’re doing things, it won’t happen. You’re changing the background image of the image, which is being blocked by the original image. Changing the height and width also won’t happen. To change the src attribute of the image, you would need Javascript or a Javascript Library such as jQuery. You could however, change the image to a simple div (text) box, and have a background image that changes on hover, even though the div box itself will be empty. Here’s 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;

}

I hope this is what you’re asking for

answered Sep 15, 2013 at 14:15

With everyones answer using the background-image option they’re missing one attribute. The height and width will set the container size for the image but won’t resize the image itself. background-size is needed to compress or stretch the image to fit this container. I’ve 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');
}

answered Dec 5, 2014 at 10:51

Fi HoranFi Horan

4954 silver badges14 bronze badges

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

Regards

answered Feb 4, 2016 at 10:57

iBet7oiBet7o

7588 silver badges8 bronze badges

Live Example: JSFiddle

The Accepted answer has some problem. The image wasn’t resized there. Use background-size property for resizing 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;
}

answered Apr 26, 2016 at 6:07

Md RafeeMd Rafee

4,7322 gold badges20 silver badges30 bronze badges

What I would recommend is to use 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 ensures that transparent images (or images with transparent parts) are shown correctly (otherwise, if the second pic would be half-transparent, you would also see parts of the first picture).

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

If (for any reason) you don’t want to change the bg-image of an image, you could also put the image in a div-container as following:

HTML:

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

… and so on.

answered Jul 12, 2017 at 13:08

Use «content:;» at the hover.This works.

answered Aug 15, 2020 at 2:56

Just use Photoshop and create two of the same image, the 1st one being how you want it to look, the 2nd being how you want it to look when it’s hovered over. I’m wrapping the image in an <a> tag, because I’m assuming that it’s what you want. For this example I’m doing a facebook icon which is desaturated, but when hovered over it will show the blue color of facebook.

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

Tunaki

130k46 gold badges326 silver badges414 bronze badges

answered Dec 1, 2015 at 9:28

Here is the 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>

answered Jun 20, 2017 at 18:50

I had a similar problem.

With my button defined like:

<button  id="myButton" class="myButtonClass"></button>

I had the background styling like this:

#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

When I switched it to:

#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

The hover over feature worked just fine.

(not addressing other attributes like size and position of image or of container, just the background image changing)

answered Sep 26, 2019 at 14:46

wolfsshieldwolfsshield

6775 silver badges14 bronze badges

Источник

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1", тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity, которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X), так как они не поддерживают свойство opacity. Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами <head> и </head> html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов <img>, имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками { и }. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 {
   filter: alpha (Opacity=25);
   opacity: 0.25;
}
img.animate1:hover {
   filter: alpha (Opacity=100);
   opacity: 1;
}

Результат будет такой:

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition, которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 {
   filter: alpha (Opacity=25);
   opacity: 0.25;
   -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
   -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
   -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
   transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
}
img.animate1:hover {
   filter: alpha (Opacity=100);
   opacity: 1;
}

Результат:

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
}

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
}

Результат:

Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background. А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background. Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1:

И добавляем следующие описания стилей:

div.rotate1 {
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
}
div.rotate1:hover {
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
}

И результат:

Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.

Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position. Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент <a>. Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 {
   background: url (img/button.png); /* Путь к файлу с исходным рисунком */
   display: block; /* Ссылка как блочный элемент */
   width: 50px; /* Ширина рисунка в пикселах */
   height: 30px; /* Высота рисунка */
}
a.rotate2:hover {
   background-position: 0 -30px; /* Смещение фона */
}

Результат:

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute. В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

.animate2{
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
}
.animate2 img {
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

.animate2 img.first { /* первая картинка полностью прозрачная */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */
opacity:1;
filter:alpha (opacity=100);
}
.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */
opacity:0;
filter:alpha (opacity=0);
}

Результат:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

И результат:

А если добавить свойство transform:

.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
}

Получится так:

Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.

Источник

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Заменить одну картинку на другую при наведении на неё курсора мыши.

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover, он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера <a>. Сам рисунок добавляется и меняется с помощью стилевого свойства background. Алгоритм действий следующий.

Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI), здесь URI — путь к графическому файлу.
Присоединяем псевдокласс к селектору A и снова включаем свойство background, но в качестве значения указываем замещающее изображение.
Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block, а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега <a>.

Пример 1. Использование псевдокласса :hover

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перекатывания</title>
  <style>
   a.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.

Эффект перекатывания с одним рисунком

Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position, как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перекатывания</title>
  <style>
   a.rollover {
    background: url(images/mark.png); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 151px; /* Ширина рисунка в пикселах */
    height: 40px; /* Высота рисунка */
   }
   a.rollover:hover {
    background-position: 0 -40px; /* Смещение фона */
   }
  </style>
 </head>
  <body>
  <p><a href="link.html" class="rollover"></a></p>
 </body>
</html>

Для селектора A устанавливается фоновое изображение через свойство background, ширина (width) совпадает с рисунком, а высота (свойство height) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Источник

Как менять картинку при наведении курсора мыши

Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример — это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.

Многие, конечно, будут делать это на JavaScript, хотя это совершенно неразумно. Такие вещи делаются с помощью CSS и псевдоэлемента hover. Давайте с Вами поставим задачу.

У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.

HTML-код очень простой:

<div class="img"></div>

Теперь CSS-код:

.img { background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию height: 100px; // Высота картинки width: 100px; // Ширина картинки } .img:hover { background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши border: 2px solid #f00; // Устанавливаем красную рамку height: 120px; // Высота новой картинки width: 120px; // Ширина новой картинки }

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

Данный способ является классическим, который постоянно используется для создания динамических эффектов без использования JavaScript, думаю, что Вы будете его использовать ещё не раз.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Создано 04.06.2012 12:53:28
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Чтобы при наведении на картинку, она менялась, достаточно применить псевдокласс :hover.

Самый простой вариант

<style type="text/css"> 
.izo { 
background: url(http://изо1.jpg) no-repeat 50% 50%;  
display: block;
width: 400px; 
height: 400px; 
}

.izo:hover { 
background: url(http://изо2.jpg) no-repeat 50% 50%; 
} </style> 

<a href="#" class="izo"></a>

Второй вариант, когда при наведении на картинку, она меняется

То же самое можно оформить с помощью прозрачности фона. Только здесь тег a не пустует.

<style type="text/css">
.demoizo {
  display: block;
  text-align: center;
 }

.demoizo:hover, .demoizo:focus, .demoizo:active {
  background: url(http://изо2.jpg) no-repeat 50% 50%;
 }

.demoizo:hover img, .demoizo:focus img, .demoizo:active img  {
  background: transparent;
  visibility: hidden;
}
</style>


<a href="#" class="demoizo">
<img src="http://изо1.jpg" />
</a>

Третий вариант

<style type="text/css">
  .demo { 
    position:relative; 
    margin:0 auto; 
    height: 400px;
    width:400px;
    display: block;
}

  .demo img { 
    left: 0; 
    position:absolute; 
    top: 0; 
}

  .demo img.raz {opacity:0;filter:alpha(opacity=0);}
  .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
  .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
    
</style>

<a class="demo" href="#">
<img class="raz" src="http://изо2.jpg" />
<img class="dva" src="http://изо1.jpg" />
</a>

Добавив свойство transition в последнем примере, изменения будут происходить более плавно.

.demo img {
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.demo img.raz {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}

.demo:hover img.raz {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}

.demo:hover img.dva {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}

Пункт 3.2. Или так.

.demo img.raz {
  -moz-transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
}
 .demo:hover img.raz {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
 .demo:hover img.dva {
  -moz-transform:rotate(360deg) scale(0);
  -webkit-transform:rotate(360deg) scale(0);
  -o-transform:rotate(360deg) scale(0);
  -ms-transform:rotate(360deg) scale(0);
}

.demo { overflow:hidden; }

.demo img.dva, .demo:hover img.raz { margin-top: 0px; }

.demo:hover img.dva { margin-top: 400px; }

.demo img.raz { margin-top: -400px; }

Пункт 3.4. Главное, чтоб фантазии хватило.

.demo { overflow:hidden; }

.demo img.dva, .demo:hover img.raz { margin: 0px; }

.demo:hover img.dva {
  margin-top:400px; 
  margin-left:400px;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
}

.demo img.raz {
 margin-top:-400px; margin-left:-400px;
}

Последний предложенный Пункт 3.5. будет в разных браузерах отображаться по разному при наведении на картинку курсора, поскольку нет единой договорённости относительно сочетания transform: translate и transform-origin. Мне нравится больше вариант в Mozilla Firefox.

.demo:hover img.dva {
  -moz-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -webkit-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -o-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -ms-transform: translate(250px, -1400px) scale(0.5, 0.5);
  -moz-transform-origin: 0px 2700px;
  -webkit-transform-origin: 0px 2700px;
  -o-transform-origin: 0px 10000px;
  -ms-transform-origin: 0px 2700px;
  opacity:0.3;filter:alpha(opacity=0.3);} 

  .demo:hover img.raz {z-index: 2;}

Источник

Главная » Рецепты CSS » Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

Многие веб-мастера на своих сайтах в меню или на кнопках используют такой эффект, когда картинки меняются при наведении на них курсора мышки. Если вас интересует, как осуществить такой эффект, то в этой статье, я расскажу о трех способах, с помощью которых можно сделать так, чтобы картинка менялась при наведении на нее курсора мыши.
Использую чистый CSS, без JavaScript и jQuery.

Способ №1 – использование двух картинок
Подготовьте два изображения. Они должны быть одинаковых размеров, но различными по цвету.

knopka-1.png

knopka-2.png

Теперь вставим эти две кнопки в файл:

<html>
 <head>
  <meta charset="utf-8">
  <title>Способ №1 - bloggood.ru</title>
  <style>
   a.rollover {
    background: url(knopka-1.png); /* рисунок, который увидим сразу  */
    display: block; /*  Рисунок как блочный элемент */
    width: 300px; /* Ширина рисунка */
    height: 100px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background: url(knopka-2.png); /* заменяемый рисунок при наведении мыши  */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

[посмотреть пример] или [скачать исходник]

Способ №2 – использование одной картинки
Подготовьте одну картинку. Но на картинке должно быть два изображения кнопки разных по цвету.

knopka-3.png

Вы, наверное, задаете себе вопрос, как картинка будет меняться на другую, если она одна?! Легко, за счёт использования свойства background-position.
Замена одного изображения на другое происходит с помощью сдвига по вертикали. Вот и все чудеса! Смотрите на код:

<html>
 <head>
  <meta charset="utf-8">
  <title>Способ №2 - bloggood.ru</title>
  <style>
   a.rollover {
    background: url(knopka-3.png); /* рисунок, который увидим сразу  */
    display: block; /*  Рисунок как блочный элемент */
    width: 280px; /* Ширина рисунка */
    height: 70px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background-position: 0 -70px; /* Смещение фона */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

[посмотреть пример] или [скачать исходник]

Способ №3 – использование одной картинки и CSS-эффект

Возьмите картинку из способа №1, например, «knopka-1.png». Здесь нам понадобится только одна картинка. При наведении на картинку мышкой сработает CSS-эффект. Смотрите на код:

<html>
 <head>
  <meta charset="utf-8">
  <title>Способ №3 - bloggood.ru</title>
  <style>
   a.rollover {
    background: url(knopka-1.png); /* рисунок, который увидим сразу  */
    display: block; /*  Рисунок как блочный элемент */
    width: 300px; /* Ширина рисунка */
    height: 100px; /*  Высота рисунка */
   }
   a.rollover:hover {
    -webkit-filter: grayscale(100%); /* css-эффект при наведении мыши  */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

[посмотреть пример] или [скачать исходник]

Вот такие вот пироги на сегодня!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Добавить комментарий

Метки: css

Источник

| 05 сентября 2013 16:22

Многие из Вас ещё, независимо от знаний вёрстки и программирования, сталкивались с
заменой изображения при наведении на него. Самый частый пример — наведение курсора мыши на кнопку. В результате картинка менялась, возможно даже в размерах и форме. В данной статье я покажу как можно заменить изображение, изменить его размер при наведении на него, используя только CSS.

На будущее, рекомендую использовать именно такой метод, так как пользуясь средствами JS Вы рискуете попасть на пользователя, у которого он отключен в настройках браузера, в результате чего человек может не увидеть каких-либо деталей или не понять смысла задумки.

Что будем использовать? Нам достаточно псевдоэлемента hover и свойства background. Из файлов это сам html файл и изображение.

В реализации всё просто. Код состоит из двух частей:

1. html с нужным div

Код HTML

<div class="img"></div>

2. свойства css для div

Код CSS

.img {
  background: url("image001.jpg") no-repeat; /* изображение по умолчанию */
  height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
}
.img:hover {
  background: url("image002.jpg") no-repeat; /* новое изображение */
  border: 2px solid #f00; // Устанавливаем красную рамку
  height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
}

Теперь предлагаю рассмотреть занимательный и простой пример работы кода. При желании можно скачать и разобрать принцип работы у себя на компьютере.

Демонстрация Скачать исходники

Как вы видите на примере, изображение, указанное по умолчанию (то есть image001), появляется при загрузке страницы, а image002 только при наведении курсора на первое изображение.

Внимание! Нужно обязательно указывать ширину и высоту блока, в противном случае div просто не отобразится. Также будьте внимательны с указанием точных размеров блока, так как изображение внутри не будет масштабировано, так как оно считается фоновым. Если размеры блока будут меньше, то и видна будет только часть изображения.

Чаще всего используется именно такой способ смены изображения. Если хотите заменить изображение в других случаях, например, при клике, то использовать надо уже не hover, а active.

Да, существуют и другие способы заменить изображение: JS, библиотека jQuery, CSS3, но о них я напишу в статьях в соответствующих разделах.

Спасибо за внимание!

Предыдущая статья
Анимированная выдвижная боковая блок-панель на CSS Следующая статья
Как правильно создать DIV с height в 100%? CSS

Комментарии к статье (vk.com)

Источник

Вы можете просто использовать CSS-свойство background-image в сочетании с псевдоклассом :hover для замены или изменения изображения при наведении курсора мыши.

Посмотрим следующий пример, чтобы понять, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
    .card {
        width: 130px;
        height: 195px;
        background: url("images/card-back.jpg") no-repeat;
        display: inline-block;
    }
    .card:hover {
        background: url("images/card-front.jpg") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

Вы также можете объединить изображения в спрайт изображения для плавного эффекта наведения. Однако, если вы хотите добиться этого эффекта с помощью тега <img>, вы должны использовать метод абсолютного позиционирования, например:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Swap on Hover with CSS</title>
<style>
    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }
</style>
</head>
<body>
    <div class="card">
        <img src="images/card-back.jpg" alt="Card Back">
        <img src="images/card-front.jpg" class="img-top" alt="Card Front">
    </div>
</body>
</html>

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Задача

Решение

Псевдокласс :hover

Эффект перекатывания с одним рисунком

Как менять картинку при наведении курсора мыши

Самый простой вариант

Второй вариант, когда при наведении на картинку, она меняется

Третий вариант

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Похожие статьи

Комментарии к статье (vk.com)

Читайте также

Похожие посты

Читайте также: