How can I create a hover effect for these specific icons?

How can I create a hover effect for these specific icons?

Abdallahsherif
Shopify Partner
35 1 5

Hello,

I want hove effect for those icons 

Account

Wishlist

Cart

Screenshot 2024-01-01 124236.png

My Store

 

https://lacasa.co.at/

 

Replies 6 (6)

PageFly-Theodor
Shopify Partner
691 86 105

Hi @Abdallahsherif ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about Want To Make Text Hover For This Icons, let’s try this solution:
Online Store ->Theme ->Edit code -> theme.liquid

 

 

<script>
svg.t4s-icon.t4s-icon--account:hover{
	background-color: red; # effect what you want?
}
<script>

 

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Abdallahsherif
Shopify Partner
35 1 5

Thanks for you @PageFly-Theodor 

I want when put my mouse on Account Icon It hovers me Text "Account" 

Cart icon hover me Text "Cart" 

Wishlist icon hover me Text "Wishlist"

PageFly-Theodor
Shopify Partner
691 86 105

If you want that, you have to customize the theme or use HTML/liquid element

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Abdallahsherif
Shopify Partner
35 1 5

you can do it ?

PageFly-Theodor
Shopify Partner
691 86 105

You can find the code on the internet and add it to theme.liquid

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PaulNewton
Shopify Partner
7722 678 1627

@Abdallahsherif Similar to above but you either need to unhide any existing text that may exist in the html, or use a psuedo element and do all the styling that will need which includes adjusting how it's layout.

i.e. 

<script>
.t4s-site-nav__account:hover:after {
    content: "account";
    display: block;
    height: 15px;
    text-align: center;
    width: auto;
}
<script>

 

If you need this customization fully implemented then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org