vauclusebitter Posted February 27, 2020 Share Posted February 27, 2020 I'm trying to make the content of a text box change when hovered above and then revert back to the original text when mouse is moved away again. E.g. I would like the text box to change from: example.before toexample.after (on hover) toexample.before Essentially only half the text will change, the word 'example' would always stay as is. There seem to be a few tutorials on how to do this with an image block or text appearing over an image with basic CSS but not with text on text. I could do a workaround with images of the text but would prefer not keep clean, aligned and easily editable. I've found CSS to make the new text appear over the original on hover but can't seem to simultaneously hide the original so it's just doubled up. If anyone can link me to a tutorial or have any ideas - please send them through. Thanks in advance. Link to comment
tuanphan Posted February 27, 2020 Share Posted February 27, 2020 Each text block needs different code. Can you share link to text block on your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
vauclusebitter Posted February 27, 2020 Author Share Posted February 27, 2020 Sorry for what might seem like a silly question, how do I share a link to an individual text block? Just so you know where I'm at, I've currently got a code block with: <div id="hover-div"> example.before <span id="hover-element"> example.after </span> </div> and CSS:#hover-element { display: none; position: absolute; top: 0px } #hover-div:hover #hover-element { display:block } Which makes new text appear over the original on hover but can't seem to simultaneously hide the original so it's just doubled up. Thanks again. Link to comment
19blue Posted June 6, 2021 Share Posted June 6, 2021 (edited) @vauclusebitter I was able to use your code for my site. My site's background color is white so i set the background color for #hover-element to match. #hover-element { display: none; position: absolute; top: 0px; background-color: #ffffff; } #hover-div:hover #hover-element { display:block Hope this helps! Edited June 6, 2021 by 19blue tuanphan 1 Link to comment
Gigi-C Posted March 30, 2023 Share Posted March 30, 2023 Hi, I've used the code on my own website (So thank you)! However I was wondering if anyone has a solve to being able to make this a smooth transition. I love the hover effect but would like it display the text on hover smoother, almost like a fade. Is this possible? Thanks! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment