This is my first post so if I'm a bit off on the format of posting or something, please forgive me. So I'm coding a website for a gaming team, and they want their roster (there are boxes that have the player names in them) to expand and give some info when you hover over a name. I've gotten it to expand and change the text, but it looks a bit abrupt. Is there a way to make the text change smoother? I can't have a seperate CSS for each one because there will be at least 20 of them. My progress so far is below. Thanks in advance!
function replace(element, replacement) { element.innerHTML = replacement; } function unreplace(element, replacement) { element.innerHTML = replacement; }
.box { background-color: #81C441; display: inline-block; margin: 0px 10px; text-align: center; line-height: 180px; width: 200px; height: 180px; margin-bottom: 20px; font-family: arial; transition: 1s; transform: scale(1.0); } .box:hover { transition: 1s; transform: scale(1.1); }
<div class="boxcontainer"> <div onmouseover="replace(this, 'ROLE')" onmouseout="unreplace(this, 'NAME')" class="box w3-center w3-animate-top">NAME</div> </div>
You cannot (easily) animate change of content
- by the same logic, that you cannot animate font-family
for example.
You can however overlap the two texts and just change their properties by hovering over a parent element and not using JS.
Demo included.
.wrapper { position: relative; } .toHide, .toShow { transition: opacity 1s ease-in-out; position: absolute; } .toShow { opacity: 0; } .wrapper:hover .toHide { opacity: 0; } .wrapper:hover .toShow { opacity: 1; }
<div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div> <br> <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div> <br> <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div> <br> <div class="wrapper"> <span class="toHide">NAME</span> <span class="toShow">POSITION</span> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.