The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS On Hover Image Fade

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33923


    I am trying to make an image fade on hover and when doing so show a small png image underneath it. Essentially what I want to do is have an image of a magnifying class show up over the image when hovered on so that the person knows that when they click it it will lightbox.

    I am using the following CSS. The fading works fine but the image does not show.

    img.framed {background:#fff; border:1px solid #CFCFCF; display:block; margin-bottom:20px; padding:4px; border-radius:3px;-moz-border-radius:3px; -webkit-border-radius:3px;box-shadow: 0 1px 3px rgba(0, 0, 0, .3);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);}

    img.framed:hover {
    opacity: 0.30; /* FX, Safari, GC, Opera, decent browsers */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */
    filter: alpha(opacity=30); /* IE */
    background-image: url(images/looking.png) center no-repeat;

    /* in Safari, FX and Chrome add a fade transition */
    -webkit-transition: opacity .25s linear .1s;
    transition: opacity .25s linear .1s;

    Any help would be appreciated.




    i would love to take a look at it for you. jsfiddle?


    Please suggest a solution.



    Here are a few fiddles I have done for others in the past:

    Feel free to use/alter them as you wish.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.