Forums

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

Home Forums CSS Show Icon in center of an image on mouse hover with transitions

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #165900
    mib70
    Participant

    Hello, I´m trying to do a effect that is when I hover my “image1.png” I want to show in the center of the image a search icon with a fade effect. I´m trying for hours ago but I´m not having sucess. Can you give me a little help?

    My Html:

    <article id=”loop-news”>
    <I class = “fa fa-search-plus” > <!–show just on mouse hover –>

    <h2>Title </h2>
    My Post
    </article>

    My CSS:

    #testIcon>i {
    position: aboslute;
    margin-top: -1400px;
    display: none;
    text-align: center;
    font-family: arial;
    }

    #loop-news:hover #testIcon>i{
    display: block;
    }

    #loop-news:hover img {
    opacity: .5;
    }
    img, #testIcon>i {
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    }

    #165905
    Paulie_D
    Member

    Could you make a Codepen?

    This should be pretty simple but it’s likely that you will have to tweak the HTML structure.

    A wrapper around the image and icon would be ideal.

    #165967
    mib70
    Participant

    Thank you for your answer, I never work with codepen but with jsfiddle yes.
    There is my jsfiddle, hope there is no problem to be posting the jsFiddle.

    My jsfiddle: http://jsfiddle.net/ritz/L8QnA/6/

    I´m having this problems with my try:
    – > the image that I´m trying to apply the hover effect is getting bigger then the other with no hover effect yet
    – > and so the text that I have in the image with hover effect is stuck in the image
    – > other problem is that the transition is not working despit I have this applied: transition: 0.3s;
    -> and finally my search icon is not in the center of the image like I wish

    Sorry the much text that I write but I was trying to explain better what is going on with my try example.

    #165977
    Paulie_D
    Member

    There’s isn’t enough information in your JSfiddle…have you forgotten to link in the images and icon fonts?

    Also, you are re-using ID tags (i.e. you have two elements with the same ID) and you can’t do that. If you need them to look the same, us a class.

    Hovever…this might help: http://codepen.io/Paulie-D/pen/kgmvn

    Frankly, I suspect the image is content and so should be in the HTML and not CSS but that’s a minor issue.

    #166010
    mib70
    Participant

    Thanks for your answer but in your example the hover effect is not working, right?

    #166036
    Paulie_D
    Member

    There IS a hover effect on the image…isn’t that what you wanted?

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