So I want to create this animation where basically this happens:
When you hover on an icon, it gets bigger, increases in opacity, and some text appears.
In addition to this, 2 lines of color extend in width from the center out to the sides, then they increase in height.
The bottom color should expand downwards, while the top color should expand upwards.
I created this test-base and was wondering how I would go about making this from here. I tried tweaking the height, width, and opacity but those also edit the icon, so I'm wondering if I'm taking the wrong approach or just doing it wrong. Any help and/or pointers are appreciated.
Current code:
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
background: #191919;
overflow: hidden;
}
.hoverCard::before {
background: blue;
content: "";
position: absolute;
width: 100%;
height: 50%;
transition: 0.5s;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="../Media/Link-Logos/Discord.png">
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>
As the requirement is to have lines drawn and expanding when the image is hovered, and the image itself cannot have pseudo elements, this snippet adds a further element after the img, .lines.
This is positioned absolutely and sized relative to the overall card (parent) element.
It has before and after pseudo elements which draw lines and then expand vertically using a CSS animation.
As I was unclear what you wanted to happen about the line going downwards (if it keeps the same background color as the card then of course it can't be seen) so this snippet makes it pink.
Of course you will want to alter timings and perhaps dimensions to suit your specific requirements, this is just a simple example to demonstrate one possibility.
<html>
<head>
<link rel="stylesheet" href="main.css">
<style>
* {
margin: 0;
padding: 0;
font-family: "Consolas";
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverCard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 480px;
border-radius: 30px;
overflow: hidden;
}
.hoverCard .mainImg {
opacity: 0.25;
height: 160px;
width: 160px;
transition: 0.5s;
margin: 10;
margin-top: 50%;
}
.hoverCard .mainText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.hoverCard .subText {
opacity: 0;
color: blue;
margin-top: 0%;
transition: 0.5s;
}
.mainImg:hover {
transform: scale(1.5);
opacity: 1;
margin-top: 30%;
}
.mainImg:hover~.mainText {
margin-top: 20%;
opacity: 1;
}
.mainImg:hover~.subText {
margin-top: 25%;
opacity: 1;
}
.lines {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
display: flex;
justify-content: center;
background-color: #191919;
}
.lines::before,
.lines::after {
content: '';
margin: 0 auto;
position: absolute;
width: 160px;
height: 10px;
opacity: 0;
}
.lines::before {
background-color: blue;
bottom: 50%;
}
.lines::after {
background-color: pink;
top: 50%;
}
#keyframes expand {
0% {
opacity: 0;
width: 160px;
height: 10px;
}
9.99% {
opacity: 0;
}
10% {
width: 240px;
opacity: 1;
}
50% {
width: 100%;
height: 10px;
}
100% {
opacity: 1;
width: 100%;
height: 100%;
}
}
.mainImg:hover~.lines::before,
.mainImg:hover~.lines::after {
display: block;
animation: expand 3s linear forwards 0.3s;
}
</style>
</head>
<body>
<div class="hoverCard">
<img class="mainImg" src="https://picsum.photos/id/1015/200/200">
<div class="lines"></div>
<p class="mainText">Discord</p>
<p class="subText">Ex0tic_Python#7571</p>
</div>
</body>
</html>
Related
On mouse hover, animated span tags beneath an img work fine when the img isn't using object-fit: contain like below:
body {
height: 100%;
width: 100%;
margin: 0
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
}
.product {
position: relative;
width: 150px;
}
img.content {
background: white;
height: auto;
margin: 8%;
position: relative;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<p>Hover image please</p>
<div class="product">
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
</div>
</div>
</body>
But when the img is using object-fit: contain the animated spans take up the entire area:
body {
height: 100%;
margin: 0;
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 700px;
}
.product {
height: 100%;
position: absolute;
}
.content {
background: white;
margin: 8%;
position: relative;
width: 84%;
height: 100%;
vertical-align: middle;
z-index: 5000;
object-fit: contain;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
How do you make these hover effects apply only to the area around the image (not the entire area) when using object-fit: contain? The image must remain vertically centered using object-fit.
Is this what you wanted? The image is centered between the animated divs.
The reason why your image is larger in the second example you've given is because you've changed your CSS there. You've changed the height/width values of .container, .product etc, so the children elements are showing up larger, because they inherit these values.
I've changed max-width and min-height in .container to reduce the overall size. And the width of .content should be less than the width of the effect divs
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
max-width: 300px;
/* This is new */
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 300px;
/* This is new */
}
.product {
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
display: flex;
align-self: center;
background: white;
margin: 0 auto;
position: relative;
width: 65%;
/* This is new */
object-fit: contain;
/* This is new */
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: flex;
}
.effects {
position: absolute;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: flex;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
visibility: visible;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
object-fit: contain;
display: flex;
margin: 0 auto;
align-self: center;
position: relative;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effects">
<img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"></span>
<span class="effect-2"></span>
</span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
hi i have a div and i want to put it as the scrollbar. this is the image of my div
i used this style "overflow-y: scroll;" but it's not what i'm looking for
this is my html tag
body {
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.mouse {
width: 100px;
height: 150px;
border: 2px solid white;
border-radius: 50px;
position: relative;
overflow-y: scroll;
}
.mouse::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: white;
top: 30px;
left: 50px;
transform: translateX(-50%);
border-radius: 50%;
animation: scroll 1s infinite;
}
#keyframes scroll {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 100px;
}
}
<div class="mouse"></div>
what should I do???
You should change overflow-y: scroll; to overflow-y: auto;. For example:
.mouse {
overflow-y: auto;
}
body {
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.mouse {
width: 100px;
height: 150px;
border: 2px solid white;
border-radius: 50px;
position: relative;
overflow-y: auto;
}
.mouse::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: white;
top: 30px;
left: 50px;
transform: translateX(-50%);
border-radius: 50%;
animation: scroll 1s infinite;
}
#keyframes scroll {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 100px;
}
}
<div class="mouse"></div>
Of course you can delete overflow-y from .mouse
I need my h1 "Мышонок" to remain fully visible when I click hamburger menu.
When I click the menu, my white h1 becomes behind it, and I can't figure out how to make it 100% visible.
I tried to mess with z-index but I was unfortunate. Noob here. Please help
#import url("https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Oswald", sans-serif;
}
img {
width: 100%;
height: auto;
}
/* Utility */
.container {
margin: 0 auto;
max-width: 1160px;
padding: 0 20px;
overflow: hidden;
}
.overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.hidden {
display: none;
}
/* Home */
.showcase {
position: relative;
height: 100vh;
background-image: url(../img/homebg/bg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: slide 18s infinite;
transition: 100ms ease-in-out;
width: 100%;
}
.showcase h1 {
font-size: 3.5rem;
font-weight: 500;
color: #fff;
padding-top: 40px;
text-transform: uppercase;
z-index: 1001;
}
#keyframes slide {
0% {
background-image: url(../img/homebg/bg1.jpg);
}
20% {
background-image: url(../img/homebg/bg2.jpg);
}
40% {
background-image: url(../img/homebg/bg3.jpg);
}
60% {
background-image: url(../img/homebg/bg4.jpg);
}
80% {
background-image: url(../img/homebg/bg5.jpg);
}
100% {
background-image: url(../img/homebg/bg1.jpg);
}
}
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 100%;
}
.menu-wrap .toggler {
position: absolute;
top: 55px;
right: 280px;
z-index: 1002;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 55px;
right: 270px;
z-index: 1001;
width: 70px;
height: 60px;
padding: 1rem;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Icon */
.menu-wrap .hamburger>div {
position: relative;
flex: none;
width: 100%;
height: 4px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.menu-wrap .hamburger>div::before,
.menu-wrap .hamburger>div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 4px;
background: inherit;
}
.menu-wrap .hamburger>div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked+.hamburger>div {
transform: rotate(135deg);
}
.menu-wrap .toggler:checked+.hamburger>div:before,
.menu-wrap .toggler:checked+.hamburger>div:after {
top: 0;
transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover+.hamburger>div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked~.menu {
visibility: visible;
}
.menu-wrap .toggler:checked~.menu>div {
transform: scale(1);
transition-duration: 0.75;
}
.menu-wrap .toggler:checked~.menu>div>div {
opacity: 1;
transition: opacity 0.1s ease 0.1s;
}
/* Menu overlay */
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu>div {
background: rgba(0, 0, 0, 0.5);
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
border-radius: 50%;
}
.menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu>div>div>ul>li {
list-style: none;
font-size: 3rem;
padding: 1rem;
}
.menu-wrap .menu>div>div>ul>li>a {
color: #fff;
text-decoration: none;
}
<div class="hidden">
<img src="img/homebg/bg2.jpg" />
<img src="img/homebg/bg3.jpg" />
<img src="img/homebg/bg4.jpg" />
<img src="img/homebg/bg5.jpg" />
</div>
<!-- Home -->
<div class="showcase">
<div class="overlay">
<div class="container">
<h1>Мышонок</h1>
<!-- Hamburger -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>Personal</li>
<li>Men</li>
<li>Women</li>
<li>Video</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I don't know what more details to add, stackoverflow, I believe I described it as much as I could
Here is What I was able to come up with to be able to solve your issue: https://jsfiddle.net/L7ac6j3v/8/
One of the main issues I think you were facing was over complicating it for yourself by using crazy z-index values like 999 to 1005 etc, you'll see I have removed or replaced alot of the values with easy to work with values like 1,2 etc
Another main issue I was seeing was your use of the position style and not having position: absolute when trying to work with the z-index of an element
As a side note a way that I like to test if elements are positioned correctly is to use cursor: pointer and pointer-events
Hope this helps :)
I cannot understand why a simple hover effect on a div won't work in IE10.
CSS:
.portfolio {
margin-bottom: 130px;
.portfolioContainer {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
.portfolioBox {
display: flex;
width: 50%;
height: 250px;
padding: 10px;
.moreBoxInfo {
display: none;
}
.portfolioBoxLogo {
width: 50%;
background-color: $lighter_gray;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
img {
display: block;
transform: scale(0.8);
max-width: 90%;
width: 100%;
}
}
.portfolioBoxImg {
width: 50%;
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $primary;
opacity: 0;
transition: opacity .5s;
z-index: 1;
}
.portfolioBoxText {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
opacity: 0;
transition: opacity .5s;
z-index: 2;
p {
font-size: 16px;
line-height: 20px;
text-align: left;
}
}
.more {
position: absolute;
right: 20px;
bottom: 20px;
#include fontFamilySize("HelveticaNeueThin", 36px, 42px);
cursor: pointer;
display: none;
z-index: 3;
}
&:hover {
&:before {
opacity: .95;
}
.portfolioBoxText {
opacity: 1;
}
.more {
display: block;
}
}
}
}
}
}
HTML:
<div class="portfolio">
<div class="portfolioContainer">
<div class="portfolioBox">
<div style="background-image: url( img/participadas/forcemanager-img.jpg)" class="portfolioBoxImg">
<div class="portfolioBoxText">
<p>Aplicació per accelerar les vendes en equips comercials basada en Intel·ligència Artificial.</p>
</div>
<span class="more">+</span>
</div>
</div>
</div>
</div>
This SASS code compiles perfectly well.
The expected working code should be that when I hover the div.portfilioBoxImg, the :before, .more and .portfolioBoxText should gain opacity: 1, but it won't work.
I have other hovers around the site, and they work fine, but this one doesn't.
I tried getting rid of transition, without opacity and adding display none/block, but those works on themselves, what it doesn't works is the hover effect.
Compiled CSS extracted from chrome:
.portfolio .portfolioContainer .portfolioBox .portfolioBoxImg:before
This works perfectly on IE11, Firefox, chrome...
JSFiddle: http://jsfiddle.net/vy5npu3a/
EDIT
I tried a hover within the body with the ::before, and it doesn't works either, but with an anchor a it does. Maybe some elements don't work?
The doctype html was missing. I can swear i had try it before without success, but seems like now works.
I'd like to get this effect:
But I cant move only the content, leaving fixed the container. If you see my fiddle, I'm moving all together, the content and the container.
And even I'd like to put the hover on the circle div, not in the content like it is right now, because now when the animation ends it losing the hover.
A little detail to keep in mind:
I need to update at runtime the text to display due it should be
translated depending on the language selected by the user.
Here is my fiddle
.frame {
display: flex;
background-color: green;
height: 200px;
width: 200px;
flex-direction: center;
justify-content: center;
align-items: center;
}
.oval {
display: flex;
background-color: white;
border-radius: 50px;
width: 100px;
height: 100px;
}
.box {
display: flex;
flex-direction: column;
background-color: gray;
height: 100px;
width: 100px;
position: relative;
top: 25px;
transition: top 200ms ease-in;
border-radius: 50px;
}
.box:hover {
top: -50px;
transition: top 200ms ease-in;
animation: ticker 25s cubic-bezier(1, 0, .5, 0);
}
#keyframes ticker {
0% {
margin-top: 0
}
25% {
margin-top: -30px
}
50% {
margin-top: -60px
}
75% {
margin-top: -90px
}
100% {
margin-top: 0
}
}
.box-inn {
flex: 1;
margin: 5%;
color: white;
text-align: center;
align-items: center;
}
.first {
background-color: blue;
}
.second {
background-color: red;
}
<div class="frame">
<div class="oval">
<div class="box">
<div class="box-inn first">
Text 1
</div>
<div class="box-inn second">
Text 2
</div>
</div>
</div>
</div>
You can use pseudo-elements. First hide :after with transform: translateY(100%) and overflow: hidden on parent, and on hover you translate :before for 100% and move :after to 0.
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: 'Top';
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: 'Bottom';
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
<div class="elem"></div>
If you don't want to use pseudo-elements Fiddle
If your icons are images you may want a non-pseudo element method. Here's an example using a font awesome icon to illustrate an image (fa icons can be used with pseudo elements, however)
.link {
position: relative; /* for absolute positioned children to work */
display: inline-flex;
flex-direction: column;
height: 100px; /* this method uses absolutely position chldren so..*/
width: 100px; /* ..a fixed width and height was needed */
color: white;
border-radius: 100%;
border-color: white;
border-style: solid;
border-width: 2px;
overflow: hidden; /* hides the overflowing elements */
}
.icon {
position: absolute;
top: 50%; /* vertically position icon in center in combination with transform -50% */
left: 50%; /* same deal with horizontal centering */
transform: translate(-50%, -50%); /* horizontal, vertical */
transition: all 0.2s ease;
}
.text {
position: absolute;
top: 150%; /* positions text under the .link container element */
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.2s ease;
}
.link:hover .icon {
top: -50%; /* positions icon above the .link container element */
}
.link:hover .text {
top: 50%; /* moves text into center of .link container element */
}
/* styling - ignore */
body {display: flex;justify-content: center;align-items: center; height: 100vh;margin: 0;font-size: 24px;background-color: hsl(189, 72%, 45%);font-variant: small-caps;font-family: verdana;}.icon i {font-size: 40px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="link" href="https://jsfiddle.net/Hastig/4akmbgc1/">
<div class="icon"><i class="fa fa-home"></i></div>
<div class="text">fiddle</div>
</a>
fiddle
https://jsfiddle.net/Hastig/4akmbgc1/
Following #Nenad Vracar answer:
On:
I need to update at runtime the text to display due it should be
translated depending on the language selected by the user.
You can use data-attributes along with the attr() CSS function in the pseudo-elements' content property.
Note: Change these data-attributes with JS in your language handling logic.
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: attr(data-top-text);
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: attr(data-bottom-text);
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
<div class="elem" data-top-text="top_text" data-bottom-text="bottom_text"></div>
Another alternative is to use the :lang pseudo-class.
Using lang attribute in the element.
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: "top_text";
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: "bottom_text";
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
.elem:lang(es):before {
content: "texto_superior";
}
.elem:lang(es):after {
content: "texto_inferior";
}
<div class="elem"></div>
<div class="elem" lang="es"></div>
Changing the html lang attribute:
document.getElementById('change-lang').addEventListener('click', function() {
document.documentElement.setAttribute('lang', 'es');
});
.elem {
position: relative;
width: 100px;
height: 100px;
border: 1px solid white;
color: white;
border-radius: 50%;
background: #4CA5D0;
overflow: hidden;
}
.elem:after,
.elem:before {
content: "top_text";
position: absolute;
transition: all 0.3s ease-in;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.elem:after {
content: "bottom_text";
transform: translateY(100%);
}
.elem:hover:before {
transform: translateY(-100%);
}
.elem:hover:after {
transform: translateY(0);
}
:lang(es) .elem:before {
content: "texto_superior";
}
:lang(es) .elem:after {
content: "texto_inferior";
}
<div class="elem"></div>
<button id="change-lang">Cambiar a Español</button>