How to replace a text using CSS and hover?

Question

I know there seems to be a lot of questions like this but they all seem to do something slightly different than what I have. Most just ADD text. I have some CSS that does that already, what I'm trying to do is modify what I got to have text ALREADY there that gets replaced. I just can't seem to wrap my brain around this/can't make the right connections to make it work without breaking something else.

Right now, if you hover over the picture, the whole picture gets partially whited-out and text appears. This works exactly how I need it. What I can't figure out is how to ADD text that is there BEFORE and disappears AFTER.

I saw this fiddle: http://jsfiddle.net/d64A9/ but I can't grasp how to apply that (if it's even the right thing to do).

Here is what I got:

CSS

.pic2 {  
    height: 125px; 
    background: url(http://somewebsite/somepic.jpg) no-repeat; 
    background-size: 100%;
    overflow:hidden;
} 

.text2 {  
    height: 125px;
    background: #FFF;
    opacity: 0;
} 

h1 {
  font-weight: bold;
  color: #000;
  font-size: 42px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  text-align: center;
}

.pic2:hover .text2 { 
    opacity: 0.6; 
    text-align: center; 
    color: #000000; 
    font-size: 20px; 
    font-weight: 700; 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
    padding: 30px; 
}

HTML

<a href="http://somewebsite/page" style="text-decoration: none;">
    <div class="pic2">
        <div class="text2"> 
            <h1>Private</h1>
            <br />
            Personal information and requirements are kept completely confidential.
        </div> 
    </div> 
</a>

what's your question?

Bhojendra Rauniyar
– Bhojendra Rauniyar

2015-01-21 05:42:21 +00:00
Commented Jan 21, 2015 at 5:42 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jan 21, 2015 at 5:42
Bhojendra: read the second paragraph :)

DragonDon
– DragonDon

2015-01-21 07:23:50 +00:00
Commented Jan 21, 2015 at 7:23 — DragonDon
– DragonDon, Commented Jan 21, 2015 at 7:23

CunningFatalist · Accepted Answer · 2015-01-21 05:51:06Z

1

In the fiddle you posted, the original text is made invisible by settings its font-size to 0, and content is loaded into a pseudo element from the html data-attribute. Both happens on hover. Have a look at the comments:

span:hover{
  font-size: 0; /* set the font size to 0 to make the original text invisible */
}

span:hover:before{ /* create pseudo element */
  font-size: initial; /* don't apply font-size: 0 here*/
  content: attr(data-hovertext); /* get the data-attribute value */
}

To apply this, you need to add your data-attribute to the markup:

<span data-hovertext="This text will replace the other text">Personal information and requirements are kept completely confidential.</span>

See https://developer.mozilla.org/en/docs/Web/CSS/::after for more :)

answered Jan 21, 2015 at 5:51

CunningFatalist

4731 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DragonDon Over a year ago

Excellent! Exactly what I was looking for! Thanks sd! (I can't upvote yet, but consider this an upvote!) Now this covers one part. Let's see if I can get it to look pretty for the whole of the image.)

Ivan Venediktov · Accepted Answer · 2015-01-21 06:00:30Z

0

Or this way: HTML:

<a href="target" data-hovertext="Hover Text">Normal Text</a>

CSS:

 a:hover {font-size: 0;}
 a:hover:before {font-size: initial;content: 'I think more browsers would support this solution';}

Here is a fiddle for you.

answered Jan 21, 2015 at 6:00

Ivan Venediktov

4242 silver badges15 bronze badges

2 Comments

CunningFatalist Over a year ago

Nope, bad idea. You should keep content out of your CSS, always! And browser support is really good: caniuse.com/#feat=dataset ;)

Ivan Venediktov Over a year ago

Awesome! Thanks for that info, I will keep that in mind if I need to use that in future.

Gildas.Tambo · Accepted Answer · 2015-01-21 06:29:14Z

0

Now it is only possible with Js not Css

var anchor;

anchor = document.querySelector("a[data-hovertext]");
anchor.addEventListener("mouseover", mouseOver, false);
anchor.addEventListener("mouseout", mouseoOut, false);

function mouseOver()
{  
    anchor.innerHTML = this.getAttribute("data-hovertext")
}

function mouseoOut()
{  
   anchor.innerHTML = "Normal Text"
}

<a href="target" data-hovertext="Hover Text">Normal Text</a>

edited Jan 21, 2015 at 6:29

answered Jan 21, 2015 at 6:02

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Collectives™ on Stack Overflow

How to replace a text using CSS and hover?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related