Skip to main content
Deaf_Guy
Deaf_Guy
Inspiring
January 18, 2017
Answered

Hover effect for some not all images?

  • January 18, 2017
  • 1 reply
  • 2024 views

Hi - i'm using css in DW to make a hover effect on 4 images on my page.  when you point at them they brighten and they work great but there are 4 other images below these that i do not want to make the hover effect.  i'm not sure how to turn off the effect for those images.

can someone help explain how to do this?

thank you.

    This topic has been closed for replies.
    Correct answer pziecina

    This is being caused by something called 'specificity', that means that the css you are applying using just img in your css is overriding anything else, (not an exact definition, but it will do).

    By using img:hover as the 'target' in the css it will apply the css to all images.

    Remove the css selector for the img:hover completely then add this, (also try not to use '-' in your html/css, instead use '_' -

    .img-header:hover {

    opacity: 1.0;

    }

    You will notice that I have not included the IE filter code, this is because the use of IE filters disables cleartype, which will cause fuzzy text on the page, unless you know how to fix the problem do NOT use IE filters.

    IE10 and below has had all support from Microsoft stopped, (even security updates) so unless there is an absolute necessity for you to support these old browsers, don't worry about them.

    1 reply

    pziecina
    pziecina
    Legend
    January 18, 2017

    add a class to the 4 images you wish the effect to be applied to, then change your css to this class -

    html - <img class='itsname' rest of code.

    css

    .itsname (

    your css

    }

    Deaf_Guy
    Deaf_GuyAuthor
    Inspiring
    January 19, 2017

    OK thanks.  Here is the hover effect CSS that works. Then note the image class below it - I just left it blank thinking that when it reads the class it will just make it appear normal:

    <style>

    img {

        opacity: 0.8;

        filter: alpha(opacity=80); /* For IE8 and earlier */

    }

    img:hover {

        opacity: 1.0;

        filter: alpha(opacity=100); /* For IE8 and earlier */

    }

    .img-header {

    }

    </style>

    Here is the image code:

    <img src="myimage.jpg" class="img-header" width="823" height="40" alt=""/>

    Notice the class I put there.  But it does not work - the myimage keeps lighting up on hovering.  Any idea on what i'm doing wrong?

    pziecina
    pziecinaCorrect answer
    Legend
    January 19, 2017

    This is being caused by something called 'specificity', that means that the css you are applying using just img in your css is overriding anything else, (not an exact definition, but it will do).

    By using img:hover as the 'target' in the css it will apply the css to all images.

    Remove the css selector for the img:hover completely then add this, (also try not to use '-' in your html/css, instead use '_' -

    .img-header:hover {

    opacity: 1.0;

    }

    You will notice that I have not included the IE filter code, this is because the use of IE filters disables cleartype, which will cause fuzzy text on the page, unless you know how to fix the problem do NOT use IE filters.

    IE10 and below has had all support from Microsoft stopped, (even security updates) so unless there is an absolute necessity for you to support these old browsers, don't worry about them.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices