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
  • #165900

    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

    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;


    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.


    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:

    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.


    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:

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


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


    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.