-
Posts
-
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.
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%;
}
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 :-)
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
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.
:-)
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
- The topic ‘Enlarge hover icon on images’ is closed to new replies.