BlueOwlCreative » Topic: effect to increase size of image when hover

effect to increase size of image when hover

ClaireBurgdorf — Tue, 03 Dec 2019 18:02:51 +0000

We are looking to increase the size of these icons when you hover over them to show they are links… http://www.routegenie.com is there a css effect or way we can customize that so the image size will get slightly larger or something like that?

Reply To: effect to increase size of image when hover

BlueOwl — Wed, 04 Dec 2019 08:01:44 +0000

Hi again,

Which icons are you referring to the ones in the tabs?
If yes, you can do something like this:

.resp-tabs-list .resp-tab-item:hover span.icon {
    font-size: 20px;
    transition: all .3s ease;
}

Reply To: effect to increase size of image when hover

ClaireBurgdorf — Wed, 04 Dec 2019 15:32:28 +0000

I’m referring to the ones on our homepage, there are 9 of them (www.routegenie.com) I have them built as an image with a link attached and want some kind of way to Make it stand out when you hover over the image to know there is a link attached to the image.

Reply To: effect to increase size of image when hover

BlueOwl — Thu, 05 Dec 2019 19:53:32 +0000

OK, you can do that with simple css. Add the “hover_link” class to your anchor tags around the img and then style them like so:

a.hover_link img {
    transition: transform .2s ease;
}
a.hover_link:hover img {
    transform: scale(1.1);
}

Reply To: effect to increase size of image when hover

ClaireBurgdorf — Thu, 05 Dec 2019 20:49:56 +0000

do you have a page that describes what an actor tag is and where I place this css?

Reply To: effect to increase size of image when hover

BlueOwl — Fri, 06 Dec 2019 14:02:27 +0000

this is an anchor tag. The custom CSS can be placed in your child theme or in your Theme Options -> Custom CSS.

Reply To: effect to increase size of image when hover

ClaireBurgdorf — Mon, 09 Dec 2019 20:30:43 +0000

Reply To: effect to increase size of image when hover

BlueOwl — Tue, 10 Dec 2019 20:49:00 +0000

You are most likely in need to use the code button to show code?

Reply To: effect to increase size of image when hover

ClaireBurgdorf — Wed, 11 Dec 2019 18:04:05 +0000

if this is the code for the image I’d love to zoom in when you hover over the image link. what would the custom code look like

Reply To: effect to increase size of image when hover

BlueOwl — Wed, 11 Dec 2019 21:42:22 +0000

Well that same code is wrapped in an tag right? That’s called an anchor tag (a link).

So you add that class that I explained earlier to the link.