I'm new in HTML, CSS, sorry if my question is not professional.
I tried to find information about delay after animation but without results. Only before. My question is:
I have two buttons and div, when mouse on div - buttons should be shown - I resolved it with visibility and hover. but I need delay (when I move mouse out of div, buttons should be visible 5 sec more).
As I saw animation-delay does not resolve this issue. Please help to understand how I can do it. My code is bellow.
#deleteRow {
width: 80px;
height: 80px;
background-color: #881013;
border: none;
background-image: url("minus.png");
background-repeat: no-repeat;
background-position: center;
left: -84px;
padding: 0px;
margin: 0;
position: absolute;
visibility:hidden;
}
#deleteCol {
width: 80px;
height: 80px;
background-color: #881013;
border: none;
background-image: url("minus.png");
background-repeat: no-repeat;
background-position: center;
top: -84px;
right: 0px;
padding: 0px;
margin: 0;
position: absolute;
visibility:hidden;
}
.container {
position: relative;
display: inline-block;
}
.container:hover #deleteRow {
visibility:visible;
}
.container:hover #deleteCol {
visibility:visible;
}
To select an element present after div as button over-here, so for that use CSS + selector, using transition-delay you can delay the transition of visibility on hover, as below,
div {
width: 200px;
height: 200px;
background: red;
margin-bottom: 20px;
}
button {
transition: 1s ease;
transition-delay: 5s;
}
div:hover + .btn1 {
visibility: hidden;
}
div:hover + .btn1 + .btn2 {
visibility: hidden;
}
<div></div>
<button class="btn1">Click - 1</button>
<button class="btn2">Click - 2</button>
You could use a transition on your hover properties, and put a transition-delay on it.
https://www.w3schools.com/cssref/css3_pr_transition-delay.asp
You also can use some JavaScript code (with jQuery library included).
$(".container").mouseenter(function(){
$("#deleteRow,#deleteCol").css("visibility","visible");
});
$(".container").mouseout(function(){
setTimeout(function(){
$("#deleteRow,#deleteCol").css("visibility","hidden");
}, 5000);
});
Related
The title says it all. I need help with aligning the popup text, first time posting here as I search and tried but couldn't find any solution :(
I'm made the popup appear when I press a button but I can't align POPUP ARROW with the button.
I don't know what more I can say about this but I can't submit it as I must say something more...
Note: I'm a learner not a professional programmer.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 500px;
height: 500px;
background-color: #555;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px 1;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<body style="text-align:center">
<div class="popup" onclick="myFunction()">
<button class="button";">How to use?</button>
<span class="popuptext" id="myPopup">1. Press "Insert Token" and insert the tokens.txt</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
Hopefully, this JSFiddle is what you're looking for?
Your issue was with the margin-left on .popup .popuptext. You had it set to -80px, it needs to be half of the width.
Edit
I have updated the Fiddle to include the changes suggested by #Atul in the comment below. margin-left: -250px has been removed and replaced with transform: translateX(-50%).
Do One thing get it in center through css
.popup-text{
visibility: hidden;
width: 500px;
height: 500px;
background-color: #555;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 8px;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index: 1;
}
It will position your popuptext in center vertically and horizontally as well.
if you just want it center vertically so change last 3 line code with this code:
position:absolute;
left:50%;
transform:translateX(-50%); // You can event use margin-left:-250px b'cause you have fix 500px.
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
Please consider following example.
Div which is the shape of ball does move but its sudden movement rather I want it to transition diagonally across the page to the bottom right corner. Why isn't that happening? What did I miss?
.one {
background: green;
height: 100px;
width: 100px;
position: absolute;
border-radius: 100px;
transition: all 1s ease;
}
.one:hover {
background: red;
bottom: 0px;
right: 0px;
}
<div class="one"></div>
For transition to happen, you need values on both the parent and hover element selectior.
Here i just added proper values to both the selectors , and by subtracting their heights easily.
.one {
background: green;
height: 100px;
width: 100px;
position: absolute;
border-radius: 100px;
transition: all 1s ease;
top: 0%;
left: 0%;
}
.one:hover {
background: red;
top: calc(100% - 100px);
left: calc(100% - 100px);
}
<div class="one"></div>
These will work with most modern browsers . Also you can use pollyfill to make it work with backward browsers
For transition to happen, you need values on both the selectors.
Here in your case, the parent selector did not have any values of bottom or of left, but if you look at my code, both the parent and hover selectors have top and left value.
We just need to specify value so browser knows that where to start from
you can try by giving these to hover state
top:100%;
left:100%;
margin-top:-100px;
margin-left:-100px;
check the codepen here http://codepen.io/raomarif/pen/RGNpNm?editors=1100
Just to give you an more complex example which does the transition on hover but continues it no matter where the mouse is + is reversible.
var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */
function mouseOver(element) {
if (totalSeconds === 0) {
var myTimer = setInterval(function() {
countTime()
}, 100);
}
function countTime() {
++totalSeconds;
console.log(totalSeconds);
if (totalSeconds >= (transitionTime / 100)) {
stopTime();
totalSeconds = 0;
toggleClass = true;
} else {
toggleClass = false;
}
}
if (toggleClass) {
element.classList.toggle('moved');
}
function stopTime() {
clearInterval(myTimer);
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.one {
position: absolute;
background: green;
height: 100px;
width: 100px;
top: 0;
left: 0;
border-radius: 100px;
transition: all 1000ms ease-in-out;
}
.one.moved {
top: 100%;
left: 100%;
margin-top: -100px;
margin-left: -100px;
transition: all 1000ms ease-in-out;
}
<div class="one" onmouseover="mouseOver(this)"></div>
This example requires Javascript. There's some checks to see if the transition is complete so hovering the circle again won't reverse the transition etc.
JSFiddle to play around with
I want to reduce element size a bit as an effect, when it is hovered over with a mouse. However, this looks buggy because as the element reduces in size, the "hover area" gets smaller as well, which can result into the element not being hovered anymore, which further results into this "size flickering".
Is there a proper way to implement element size reduction on hover, while keeping the hover area size the same? Without extra elements?
Here is a fiddle: https://jsfiddle.net/ahvonenj/88f5by59/
Required code for fiddle linking:
#di
{
position: absolute;
left: 15px;
top: 15px;
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di:hover
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
Wrapping it in a div would be better, as commented. But if adding no other elements is a must, you could work with pseudo elements.
Make the visible part a pseudo element (like :before), and keep the main one just for hovering:
TIP: If you want the transition effect on both mouse over and out, set the property to the main css rule, not to the hover one
#di
{
position: absolute;
left: 15px;
top: 15px;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di:before {
content: "";
display: block;
background-color: #2980b9;
width: 100px;
height: 100px;
}
#di:hover:before
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
<div id = "di">
</div>
You can wrap the div inside a container and "bind" the hover event to the parent.
P.S obviously it is a solution with adding other elements.
#container
{
position: absolute;
left: 15px;
top: 15px;
box-sizing: border-box;
}
#container, #di{
width: 100px;
height: 100px;
}
#di{
background-color: #2980b9;
}
#container:hover #di
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
<div id="container">
<div id="di">
</div>
</div>
Yep, this is your answer. You have to add one more element. See this fiddle:
https://jsfiddle.net/vwy4utf5/
html:
<div id = "di">
<div id="diin">
</div>
</div>
CSS
#di{width:101px; height:101px; cursor:pointer; position: absolute;
left: 15px;
top: 15px;}
#diin
{
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
transition: all 200ms linear;
}
#di:hover > div
{
width: 50px;
height: 50px;
transition: all 200ms linear;
}
I tried it using Jquery, didn't specified by OP but I guess it can help somebody.
So changed css to make parent positioning of new parent:
#di {
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di_parent {
padding: 0;
overflow: hidden;
position: absolute;
left: 15px;
top: 15px;
}
#di_parent:hover > DIV {
width: 50px;
height: 50px;
transition: all 200ms linear;
}
Then added some JQuery to create a container to each object to maitain size as is suggested above.
$('#di').each(function(i, v){
var o, p;
o=$(v);
p=$('<div id="di_parent"></div>');
p.css({height:o.outerHeight(),width:o.outerWidth()});
o.after(p);
p.append(o.detach());
});
Working fiddle:
https://jsfiddle.net/88f5by59/11/
$('#di').each(function(i, v){
var o, p;
o=$(v);
p=$('<div id="di_parent"></div>');
p.css({height:o.outerHeight(),width:o.outerWidth()});
o.after(p);
p.append(o.detach());
});
#di {
background-color: #2980b9;
box-sizing: border-box;
width: 100px;
height: 100px;
}
#di_parent {
padding: 0;
overflow: hidden;
position: absolute;
left: 15px;
top: 15px;
}
#di_parent:hover > DIV {
width: 50px;
height: 50px;
transition: all 200ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id = "di">
</div>
Hope it helps!
http://jsfiddle.net/kscjq0y0/
I want to animate the movement of the yellow div when the red one disappears.
I know it can be done with jQuery animate but I want a CSS3 solution (even if it's not fully supported by all modern browsers).
I've tried the CSS transition property but doesn't seem to work for this kind of movement.
It's there a way to do this?
Make it shrink
div {
height: 100px;
width: 300px;
background-color: red;
margin: 20px;
padding: 10px;
}
#bottom {
background-color: yellow !important;
transition: all 0.5s ease;
}
#top {
transition: all 2s;
}
body:hover #top {
height: 0px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
<div id="top"></div>
<div id="bottom"></div>
You can do this, by modifying the CSS attribute that you want to animate. Currently the positioning is based on block layout with the other div, and this is not animating. But if you update the CSS position yourself, then that transition will animate. See the below example.
window.setTimeout(function () {
$("#top").fadeOut("slow");
$("#bottom").css({ top: '0px' });
}, 1000);
div {
height: 100px;
width: 300px;
background-color: red;
margin: 20px;
padding: 10px;
}
#bottom {
position: absolute;
top: 140px;
background-color: yellow !important;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="bottom"></div>