I want to display content on mouse enter with a flip effect as shown in this sample site http://www.taboola.com/
When you hover to the Drive Traffic section a blue colored div is flipped over. How can I do this with CSS3?
The answer is right there in the code. Use your browser's inspection tools to find the relevant code per element. Here on StackOverflow we normally don't give freebies, i.e. we expect you to do some effort and not simply come here asking for this or that. Now that you know this, I extracted the relevant code from the source code. It's up to you to make it fit your needs.
.cta3 li {
perspective: 1000;
padding: 0;
display: block;
width: 33.3%;
text-align: center;
float: left;
position: relative;
}
.cta3 li .cta3 {
opacity: 0;
transform-origin: bottom;
transform: rotateX(90deg);
transition: 400ms;
width: 100%;
position: absolute;
bottom: 0;
background: #3570CC;
text-align: center;
z-index: 2000;
font-size: 15px;
padding: 20px;
}
.cta3 li:hover .cta3 {
bottom: -10px;
opacity: 1;
transform: rotateX(0deg);
}
Related
I have been hitting my head against a brickwall with this issue.
I have tried using this line of code to create an underline on hover effect with CSS using Elementor. I've tried it with a button widget and a Text Editor widget but can't seem to get it to work at all. What am I missing?
Any help would be really helpful.
Thanks
:
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
Your code almost works - the problem is the transition-property. You have left right which is not legal CSS. And in fact you only want to transition the right property, the underline stays anchored at the left side.
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover::after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
<div class="underline">Hover over me</div>
It can be helpful to run your code through the relvant validator. In this case I used the W3C CSS validator which picked up the error.
Although you can transition (animate) the right property as you have done it is often more performant (in CPU/GPU usage sense) to use transforms such as scale or translate to shrink/grow or move things.
thanks for reading and offering help.
I assume my CSS code shouldn't be too complicated, however, it does not behave the way I want.
Expected result: when hovering over the button, there is a background area "folding up" (no background color to dark background color).
Actual results:
Works in Chrome (Version 88.0.4324.146), however, there is a flicker to it, like it is rebuilding again and again. This happens especially when hovering coming from the top. Looks alright when doing it from the bottom and rather slow.
I also saw that it seems to not really work in FF (Dev Edition 86.0b9). Sometimes it pops up, but if it does, it only does so once. Refreshing the browser window is not helping either.
I already tried to have a <div> around it and apply the hover animation to it, to fix it with prefixes... so far I couldn't make it work (smoothly), the issue always persisted.
So, this is the code now, which can also be found in this codepen example
html:
<button class="btn">
click
</button>
CSS:
.btn {
height: 48px;
width: 200px;
text-align: center;
text-transform: uppercase;
border: none;
border-bottom: 1px solid steelblue;
position: relative;
color: steelblue;
background: transparent;
::before {
bottom: 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: -1;
}
&:hover,
&:focus {
animation: one 0.25s linear;
background-color: steelblue;
color: whitesmoke;
opacity: 1;
transform-origin: 50% 100%;
}
#keyframes one {
0% {
transform: perspective(1000px) rotateX(90deg);
}
100% {
transform: perspective(1000px) rotateX(0);
}
}
}
If this is a duplicate, it means I didn't find the helping answer yet, will be happy for any solutions and hints.
The problem also happens in Chrome. It happens because you are changing the perspective of the button, which will change its "bounding box".
So when you mouse over the bounding box the animation will change the bounding box, and then the mouse is not over the bounding box, so the animation stops, but then the mouse is over the bounding box again, so the animation starts, and so on.
To fix this, create a container around the button, and make the countainer change the button perspective, instead of the button changing the perspective itself. The container will retain its bounding box when yo do this:
.bcg {
display: flex;
justify-content: center;
align-items: center;
background: whitesmoke;
height: 100vh;
}
.btncontainer {
display: inline-block;
}
.btncontainer:hover .btn, .btncontainer:focus .btn {
animation: one 0.25s linear;
background-color: steelblue;
color: whitesmoke;
opacity: 1;
transform-origin: 50% 100%;
}
#keyframes one {
0% {
transform: perspective(1000px) rotateX(90deg);
}
100% {
transform: perspective(1000px) rotateX(0);
}
}
.btn {
height: 48px;
width: 200px;
text-align: center;
text-transform: uppercase;
border: none;
border-bottom: 1px solid steelblue;
position: relative;
color: steelblue;
background: transparent;
}
.btn::before {
bottom: 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: -1;
}
<div class="bcg">
<div class="btncontainer">
<button class="btn">
click
</button>
</div>
</div>
I come back here looking for your wisdom. I have been working on a website and I did some css to make a width transform animation effect behind some text, and it works fine using hover, buuut I would like to have the same effect only with an automatic animation (with some delay that works with the scroll), but saddly I don't know how.
Any ideas ?
Thanks so much !
here the website:
http://231e47.com/accueil-cf/
The hover effect is on the text "we are here!"
Here my CSS:
<style>
.highlight { display: inline-block;
color: #343434;
text-decoration: none;
position: relative;
z-index: 0;
}
.highlight::after {
position: absolute;
z-index: -1;
bottom: 10px;
left: 0%;
transform: translateX(0%);
content: '';
width: 0px;
height: 43%;
background-image: linear-gradient(120deg, #48d1de 0%, #84fab0 180%);
transition: all 250ms;
}
.highlight:hover {
color: #343434;
}
.highlight:hover::after {
height: 43%;
width: 108%;
}
</style>
THANKS A LOT !
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
I'm reverse engineering the navigation in http://dreamelectronic.com/ (must use desktop for correct view) but in my own way.
I practically have it down, spot on, but i have one little issue i need to fix to get it just right. what i have is 2 div's that are on top of eachother and they both increase the width of the top border as see in the website. BUT one div starts at the center and stretches from center to the right and the other one stretches from the left to the center (if that makes sense). i need the second div (div2 if you go and read my code from CSSDeck) to start from the center and stretch to the left.
What i have tried is to use transform: rotateX(-180deg); as suggested from one of the answers from another question, i also tried to set the test-align: right; on the div2 also suggested. I tried animation-direction: alternate; too but no cake.
I have come across several similar situations on here but none have worked for me so far.
CSSDeck Project
Many thanks if i can get this last detail down!
You could set the below properties on your div2:
div2 {
float: right;
margin-right: 50px;
...
}
Snippet:
ul {
padding: 0;
margin: 20px;
}
li {
float: left;
list-style: none;
display: inline-block;
width: 100px;
}
div1 {
margin-left: 50px;
text-align: center;
line-height: 3;
display: block;
position: absolute;
width: 0px;
height: 50px;
border-top: 3px solid #D50;
transition: all .4s ease-in-out;
opacity: 0;
}
div2 {
float: right;
margin-right: 50px;
text-align: center;
line-height: 3;
display: block;
width: 0px;
height: 50px;
border-top: 3px solid #D50;
transition: all .4s ease-in-out;
opacity: 0;
}
men a {
text-align: center;
line-height: 3;
color: #444;
text-decoration: none;
display: block;
position: absolute;
width: 100px;
height: 50px;
z-index: 1;
transition: color .4s ease;
margin-top: 4px;
}
men a:hover {
color: #D50;
}
men a:hover~div1 {
width: 50px;
opacity: 1;
}
men a:hover~div2 {
width: 50px;
opacity: 1;
}
<ul>
<li>
<men>
HOME
<div1></div1>
<div2></div2>
</men>
</li>
<li>
<men>
ABOUT
<div1></div1>
<div2></div2>
</men>
</li>
<li>
<men>
PRODUCTS
<div1></div1>
<div2></div2>
</men>
</li>
<li>
<men>
CONTACT
<div1></div1>
<div2></div2>
</men>
</li>
</ul>
So your div1 is pushed using margin-left (which you already had) and your div2 is first forced to float from right and then pushed using margin-right.
Hope this helps.
P.S. Don't forget to close the div2.
You can use positioning for "right-to-left" div:
position: absolute;
right: 0;
http://jsfiddle.net/u5ofdp9m/1/