Using CSS transitions, I'd like to add a delay on hover, of 0.5s, in the class "activator".
After these 0.5s, it should change "content-l1" class from display:none to display:block
I've tried with this code, but doesn't work at all.
.content-l1 {
transition: 0s display;
}
.activator:hover>.content-l1 {
display: block;
transition-delay: 0.5s;
}
<div class="activator">
<div class="content-l1"> // initially: display:none whatever content here
</div>
</div>
display do not animation for transition. u can use opacity
.content-l1 {
transition: 0s;
opacity: 0;
}
.activator:hover>.content-l1 {
opacity: 1;
transition-delay: 0.5s;
}
<div class="activator">
fjhfjh
<div class="content-l1">
afsfas
</div>
</div>
but the block 'content-l1' takes place. we need use position
.activator {
position: relative;
}
.content-l1 {
position: absolute;
background-color: white;
padding: .4em;
border: 1px solid black;
transition: 0s;
opacity: 0;
}
.activator:hover>.content-l1 {
opacity: 1;
transition-delay: 0.5s;
}
<div class="activator">
fjhfjh
<div class="content-l1">
afsfas
</div>
</div>
qwewertrtw
Related
I can't share a page on this, due to the page not being public. However, what I'm trying to do is create a hover effect on both a div and a H4 text element. Nothing of which seems to work for me. Here's my code:
HTML:
<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
<div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
</div>
</div>
<noscript>
<div
class="collection-image collection-image--square"
style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
</div>
</noscript>
<div class="collection-image--overlay-background"></div>
<span
class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
<span>
Text Goes Here
</span>
</span>
</a>
</div>
CSS:
.collection-image--overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
opacity: 0!important;
-moz-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#media only screen and (min-width: 768px) {
.collection-image--overlay-background:hover {
z-index: 1;
opacity: .8;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
z-index: 1;
opacity: 1;
}
}
I tried making a small snippet. See if it´s what you´re looking for.
Since you´re using the !important flag in one of your opacity rules, all the other changes after the fact will not take effect unless you also use !important. However I would not advice using !important that freely because whenever they are present such errors are a bit harder to track.
.container {
background-color: blue;
height: 100px;
}
.onHover {
background-color: red;
width: 80%;
height: 100px;
margin: 0 auto;
opacity: 0.5;
/*opacity: 0.5 !important; In your code you have
a line like this.*/
}
.onHover:hover {
opacity: 1;
}
<div class="container">
<div class="onHover">
<h4>My title Here</h4>
</div>
</div>
I have a sub-menu that appears when I hover over an item in the main menu:
I have a transition effect whereby the sub-menu transitions from 0 opacity to .9 opacity in .5 seconds. However, I also have to toggle the visibility from hidden to visible in order for this to work.
Here's the html:
<li style="position: relative;" onmouseover="showLegalMenu()" onmouseout="hideLegalMenu()">
<a>Legal</a>
<div id="legal-menu" class="legal">
<ul>
#if (termsOfUse != null)
{
<li>#termsOfUse.Name</li>
}
#if (privacyAndSecurity != null)
{
<li>#privacyAndSecurity.Name</li>
}
#if (refundPolicy != null)
{
<li>#refundPolicy.Name</li>
}
</ul>
</div>
</li>
Here's the Javascript:
function showLegalMenu() {
$("#legal-menu").addClass("legal-show");
}
function hideLegalMenu() {
$("#legal-menu").removeClass("legal-show");
}
Here's the CSS:
.legal {
visibility: hidden;
background-color: #383838;
opacity: 0;
padding: 5px 0;
z-index: 10;
position: absolute;
top: 15px;
left: 10px;
width: 150px;
transition: opacity .5s linear;
}
.legal-show {
visibility: visible;
opacity: .9;
}
Transitioning in works fine. The legal-show class is added, it is set to visible, and it transitions from 0 opacity to .9 opacity.
It's transitioning out that's the problem. The legal-show class is removed, causing the sub-menu to become invisible immediately (no transition). The sub-menu items still transition from .9 opacity to 0 opacity somehow (even though the div they are contained in is supposedly invisible at this time), but I would like for the sub-menu div to also transition to 0 opacity like this as well.
If I could just set the visibility to hidden at the end of the transition rather than right away, I believe this would work. How does one does this? Thanks.
No need to complicate it using JavaScript. This can be easily achieved by CSS only.
.legal {
visibility: hidden;
background-color: #383838;
opacity: 0;
padding: 5px 0;
z-index: 10;
position: absolute;
top: 15px;
left: 10px;
width: 150px;
transition: all 0.5s ease-in-out;
}
.parent-li:hover .legal {
visibility: visible;
opacity: .9;
}
<li class="parent-li">
<a>Legal</a>
<div id="legal-menu" class="legal">
<ul>
<li>#termsOfUse.Name</li>
<li>#privacyAndSecurity.Name</li>
<li>#refundPolicy.Name</li>
</ul>
</div>
</li>
.to-toggle {
max-height: 0;
overflow: hidden;
opacity: 0.9;
background: red;
transition: max-height .5s ease-out;
}
.to-toggle.active {
height: auto;
max-height: 500px;
transition: max-height .5s ease-in;
}
<div class="legal">
<label id="hoverable">Hover me</label>
<div class="to-toggle">
<ul>
<li>show1</li>
<li>show2</li>
<li>show3</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(() => {
$('#hoverable').hover(function() {
$('.to-toggle').addClass('active')
console.log('asdasd')
}, function() {
$('.to-toggle').css({'transition': 'opacity height 5s ease-out'}).removeClass('active')
})
})
</script>
Instead of only transitionning opacity, do it also for visibility :
transition: opacity .5s linear, visibility .5s;
visibility is a "0" or "1" state (no intermediate values) so it will change its value after .5s, giving time for your opacity transition to take effect for the fade out.
Edit : for now I don't understand why it also work for the fade in.
.legal {
visibility: hidden;
background-color: #383838;
opacity: 0;
padding: 5px 0;
z-index: 10;
position: relative;
top: 15px;
left: 10px;
width: 150px;
transition: opacity .5s linear, visibility .5s;
}
.legal-show {
visibility: visible;
opacity: .9;
}
li.legal-container:hover #legal-menu,
#legal:hover {
visibility: visible;
opacity: .9;
}
<ul>
<li style="position: relative;" class="legal-container">
<a>Legal</a>
<ul id="legal-menu" class="legal">
<li>test3</li>
<li>test</li>
<li>test2</li>
</ul>
</li>
</ul>
I am following a tutorial on how to create CSS tooltips. Everything works just fine, but there is one modification that I would like to make. I want the tool tip to show up 3 seconds after I hover over an item, but to fade out immediately when I stop hovering over the item. This is the (relevant) code I have right now:
.tooltip:hover .tooltip-text {
opacity: 0.7;
visibility: visible;
}
.tooltip-text {
...
opacity: 0;
transition: all 500ms;
transition-delay: 3s;
visibility: hidden;
...
}
This ALMOSTS works. It delays showing the tooltip for 3 seconds, like I want. However, it also delays removing the tooltip (which I do NOT want). How can I modify my code so that the tool tip fades in 3 seconds after I hover with my mouse and starts fading out immediately when I stop hovering?
Define transition properties in :hover class. Like this:
.tooltip:hover .tooltip-text {
opacity: 0.7;
visibility: visible;
transition: all 500ms;
transition-delay: 3s;
}
.tooltip-text {
opacity: 0;
visibility: hidden;
}
See working demo below. (Try hovering the red box)
.box {
width: 100px;
height: 30px;
background-color: red;
}
.tooltip {
opacity: 0;
visibility: hidden;
}
.box:hover .tooltip {
opacity: 1;
visibility: visible;
transition: all 500ms;
transition-delay: 2s;
}
<div class="box">
<div class="tooltip">
This is tooltip.
</div>
</div>
Coming from https://stackoverflow.com/a/9334132/3779853: Let's assume a basic element that gets toggled programmatically. This could mean setting display to none/block or removing/inserting the element altogether.
$('#toggle').click(() => $('#square').toggle());
#square {
width: 50px;
height: 50px;
background: lightblue;
}
.animated {
animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
With a simple animation, you can add a transition effect for when the element appears. How do you do the same thing for when the element disappears?
I do not want to add further classes, no :hover, and no more Javascript code. In many JS frameworks, you can show/hide elements easily: .toggle() (JQuery, as above), ng-if (AngularJS), *ngIf (Angular), conditional rendering (React), v-if (VueJS) and so on. With above solution, a simple class="animated" is enough to have it appear with custom animations. So I am looking for a pure CSS solution for fade out animation here, assuming this is a standard problem.
Here is a 100% pure css solution.
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
}
#myBox:checked ~ .animated {
opacity: 0;
}
#myBox ~ .animated {
opacity: 1;
}
<input type="checkbox" id="myBox" style="display:none;"/>
<button id="toggle"><label for="myBox">toggle</label></button>
<div id="square" class="animated"></div>
You can use the opacity property with transition effect.
$('#toggle').click(() => $('#square').toggleClass('animated'));
#square {
width: 50px;
height: 50px;
background: lightblue;
transition: opacity 0.5s;
opacity: 1;
}
#square.animated {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div id="square" class="animated"></div>
I'm trying to make a child div (.imagehead) slide to the left (about 25%) on hover of the parent div (#bite) and reveal another div (Name not decided, but I want it to be 2-3 lines of text) to the right of (.imagehead), relative to where (.imagehead) is.
I haven't coded in a while, sorry if this is extremely simple and I just can't solve this.
Here is the code itself (a tumblr theme I'm messing with)
<div id="headbox">
<div class="top">
<div class="nav">
<div align="center">
<BR/>
<BR/>
<div class="headimage"><img src="http://s24.postimg.org/gqgjloln9/head.png"></div>
<div id="transitiontext">I want to show this when "headbox" is hovered on, moving "headimage" to the left 25% and revealing this text next to it</div>
<BR/>
<BR/>
</div>
</div>
</div>
#headbox {
top: 30px;
}
#headbox:hover .headimage {
left: 25%;
}
http://jsfiddle.net/bko87pk9/
The image is made position: absolute to remove it from the normal flow. The text will now display underneath.
The nav container is made position: relative so that its absolute children will position themselves in relation to it and not the body
The image is moved on hover and the transition creates a smooth animation to display the text
Examples
Example 1
In this example, the text needs to be contained in a box the same height and width of the image so it does not peek out from underneath.
.nav {
height: 100px;
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text needs to be contained properly.</div>
</div>
Example 2
In this example, the text can spill out underneath as it will be hidden with opacity: 0. On hover the opacity is changed to opacity: 1 with a smooth transition.
The opacity value changes the z-value of the text div, so we need to declare z-index values (higher will display on top of lower)
pointer-events: none prevents the hover from activating when hovering the hidden text.
.nav {
height: 77px;
/* height of image */
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
z-index: 2;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
pointer-events: none;
}
.nav:hover .transitiontext {
opacity: 1;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text does not need to be contained as it will be hidden until the hover state is activated. This text does not need to be contained as it will be hidden until the hover state is activated.</div>
</div>
I am sorry for any not working code, I crested this on my phone.
<div id="test">
Hover on this div.
</div>
#test {
height: 100px;
width: 200px;
background-color: #F1F1F1;
-webkit-transition:
all 1s ease-in-out
all 1s linear;
-moz-transition:
all 1s ease-in-out
all 1s linear;
-ms-transition:
all 1s ease-in-out
all 1s linear;
-o-transition:
all 1s ease-in-out
all 1s linear;
transition:
all 1s ease-in-out
all 1s linear;
}
#test:after {
height: 100px;
width: 200px;
content: "Second div.";
display: none;
background-color: #F9F9F9;
position: absolute;
top: 0px;
left: 210px;
}
#test:hover:after {
display: block;
}