Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #27824

    Is there a way to enlarge the hover arrow icon on all the images?

    I have made a few CSS changes and feel the arrow needs to be bigger.

    http://chriswardphotography.net/business/portfolio/

    #135479

    I sorted it with this:

    /*image roll over restyle*/

    .image-overlay {

    background: rgba(255, 255, 255);

    }

    .main_color .image-overlay .image-overlay-inside::before {

    background: none;

    color: #00abda;

    border-color: #00abda;

    }

    .image-overlay.overlay-type-extern .image-overlay-inside::before {

    zoom: 400%;

    }

    #135480

    Opps again spoke too soon.

    Could you take a look at what I have done. I’m getting an odd effect when the cursor is by the image, see link:

    http://www.chriswardphotography.com/test-area/examples/example4.jpg

    Its because I have used zoom to make the icon bigger and it also enlarges the circle (which now is set to display none). The circle is there and the zoom is applied to it but it is invisible, you can only see the icon. The cursor still reads from the hidden circle and activated the hover.

    What I’m trying to do is have a single solid colour over the whole image with the icon bigger. Is there a way to make the icon bigger without using zoom or a better way of doing this?

    My bad try at CSS:

    /*image roll over restyle*/

    .image-overlay {

    background: rgba(255, 255, 255);

    }

    .main_color .image-overlay .image-overlay-inside::before {

    background: none;

    color: #00abda;

    border-color: #00abda;

    }

    .image-overlay.overlay-type-extern .image-overlay-inside::before {

    zoom: 320%;

    }

    I was also wondering if you can remove the animation of the icon?

    Thanks again, I am trying I promise, I don’t come here unless I am out of options :-)

    #135481

    Hi,

    I took a look at your css. please remove whatever you are adding. All these twitches and flickering is there because of the css you added. Take it out and you will notice that everything is back to normal.

    thanks,

    Nick

    #135482

    lol I understand that and even said what the problem was. I have enlarged the icon using zoom which also enlarges the circle.

    “Its because I have used zoom to make the icon bigger and it also enlarges the circle (which now is set to display none). The circle is there and the zoom is applied to it but it is invisible, you can only see the icon. The cursor still reads from the hidden circle and activated the hover.”

    What I’m trying to do is have a single solid colour over the whole image with the icon enlarged as its too small using the standard icon. Is there a way to make the icon bigger without using zoom or a better way of doing this? See example:

    http://www.chriswardphotography.com/test-area/examples/example5.jpg

    Anyway help would be great, I’m not the best with CSS :-/ but I try.

    :-)

    #135483

    Hi artistic24459,

    Your original rgba color code is incorrect because its rgba and you don’t have an alpha value. So it should just be rgb.

    The icon is a font so if you want it larger you just increase the font size (its the best thing about using font file for icons!).

    For example, this gives you a gray overlay with a giant icon:

    .image-overlay {
    position: absolute;
    background: #333;
    z-index: 500;
    height: 100%;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    }
    .image-overlay .image-overlay-inside::before {
    content: "E744";
    font-family: 'entypo-fontello';
    font-size: 120px;
    font-weight: normal;
    }

    .image-overlay .image-overlay-inside::before {
    position: absolute;
    border-radius: 50px;
    background: #000;
    height: 80px;
    width: 80px;
    line-height: 80px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -54px;
    z-index: 500;
    text-align: center;
    color: #fff;
    }

    a:hover .image-overlay .image-overlay-inside {
    -webkit-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }

    I included the animation just so you can have it as a reference. If you wanted everything to only effect the portfolio on that page you could use the page ID selector as a prefix to your other selectors.

    Hope this helps.

    Regards,

    Devin

    #135484

    lol oh its a font. Now I see. Thanks so much, learning learning learning :-)

    I will try it out tomorrow.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Enlarge hover icon on images’ is closed to new replies.