Icon visible on hover

HTML & CSS
1

I’m probably just missing something small, but this making me crazy!

What I’m trying to do, is when the user hovers over the button text, the text disappears and an Icon appears.
I can get the icon to appear, but the text stays, and I can’t figure how to remove the text.

I can’t really send the website as it’s currently local

html code:

 <div class="questions-or-quote">
      <h3>
         <a href="#">
            <span class="text">Contact Us or Request A Quote Today!</span>
            <span class="graphic icon-chat-bubble"></span>
         </a>
     </h3>
</div>

CSS/SASS

.questions-or-quote{
	text-align: center;
	margin-top: 5em;
	h3{
		a{
			display: block;
			background: $red;
			padding:2.5em;
			br{display:none;}
			.text{
				color:#FFF;
				padding:2.5em;
				width: 100%;
				opacity:1;
				&:hover{
					opacity:0;
					visibility: hidden;
					text-indent: -99999999px;
					position: absolute;
				}
			}
			.graphic{
				opacity:0;
				position: absolute;
				left:0;
				top:81%;
				width:100%;
				color:#FFF;
				&:hover{
					opacity:1;
				}
			}									    
		}
	}
}

I have attached a fiddle, but in the fiddle, I can’t seem to get the icon to show on hover :confused:

icon visible on hover fiddle

2

Your fiddle link is broken @lauren_olsen17

3

should work now.

4
1 Like
5

@RyanReese Thank You!

1 Like
6

@lauren_olsen17, I realize this is “yesterday’s” issue, but it appealed to me so I played with it just for fun.

@RyanReese’s code is more compact and there is not a tone of Sass in this, just CSS.

Nevertheless, the technique for positioning the icon is different so it might we worth keeping for future use.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change CTA to ICON on hover</title>
<!--
https://www.sitepoint.com/community/t/icon-visible-on-hover/234409
lauren_olsen17
Aug 22,2016 11:40 AM
Features: 
  The icon remains vertically middled as text wraps; 
  The text box does not change size when the text disappears and the icon appears.
  Stable over a very wide range of font-sizes.
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
h3 {
    display:table;
    width:70%;
    padding:0;
    margin:0 auto;
}
a {
    display:table-cell;
    height:4em;
    position:relative;  /* .icon is absolutely positioned relative to the anchor */
    text-align:center;
    vertical-align:middle;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #854;
    background-color:rgba(255,0,0,.125);
    padding:.5em 1em;
}
a .text {
    display:block;
}
a .icon {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    font-size:1.375em;
    text-transform:uppercase;
    visibility:hidden;    /* .icon is initially visiblity:hidden */
    padding-top:.125em;
}
a .icon:before,    /* this vertically middles the icon. both are not really needed. */
a .icon:after {
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

a:link,a:visited {color:#854;}
a:hover {background-color:rgba(255,0,0,.5);}
a:hover .text {
    visibility:hidden;  /* Comment this property out to see the ICON overlay the text */
}
a:hover .icon {
    visibility:visible;
    color:#fff;
}
a:active {background-color:rgba(255,0,0,.3);}
a:active .icon {color:#e00;}

    </style>
</head>
<body>

    <h3>
        <a href="#">
            <span class="text">Click this bar to Contact Us or Request A Quote Today!</span>
            <span class="icon">icon</span>
        </a>
    </h3>

</body>
</html>
3 Likes
7

Awesome @ronpat , thanks I was struggling with this one a bit!

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.