i'm trying to figure out how to work some transitions? i've got an overlay div that pops up when a link is clicked but i'm trying to make it so it either fades into the div ontop or it just melts into it?
<html>
<head>
<style type="text/css">
a:link, a:visited, a:active {
text-decoration: none;
}
html, body {
max-width: 100%;
max-height: 100%;
margin-right: auto;
margin-left: auto;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
.button {
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
float: left;
padding: 10px;
background-color: transparent;
font-weight:bold;
text-decoration:none;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
.blockpurp {
background: purple;
}
.blockyell {
background: yellow;
}
#cover {
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease; }
#loginScreen, #loginScreen2 {
padding: 20px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
overflow: scroll;
height:100%;
width:100%;
margin:0 auto;
position:fixed;
top: 0px;
left: 0px;
z-index:10;
display:none;
background: rgba(0,0,0,1);
border:0;
color: #fff;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
#loginscreen2 {
background: rgba(23,44,1,0.9);
}
#loginScreen:target, #loginScreen:target + #cover, #loginScreen2:target, #loginScreen2:target + #cover{
display:block;
opacity:9;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease; }
.cancel {
display:block;
position:fixed;
top:0px;
right:0px;
background: transparent;
color:black;
text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<table align="center" width="900px" height="300px">
<td width="60%" class="blockpurp">click</td>
<td width="40%" class="blockyell">click</td>
</table>
</div>
<div id="loginScreen">
LOL LOL LOL
×
</div>
<div id="cover" >
</div>
<div id="loginScreen2">
stuff stuff
×
</div>
<div id="cover" >
</div>
</body>
</html>
i tried using this code string:
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
but that doesn't seem to work? any ideas?
The biggest problem is that you are going from display:none to display:block. There is no real way to transition between the two using css.
Instead, you could keep them all displayed and in a fixed position, but change the appearance using z-index.
Below is an example of how you could do this.
HTML:
<div id="center">
<table>
<td class="blockpurp">click</td>
<td class="blockyell">click</td>
</table>
</div>
<div id="loginScreen">
<div>
LOL LOL LOL
×
</div>
</div>
<div id="loginScreen2">
<div>
stuff stuff
×
</div>
</div>
CSS (in need of some serious organization!):
body {
position: relative;
}
#center {
position: fixed;
background: white;
width: 100%;
height: 100%;
z-index: 5;
}
table {
width: 100%;
height: 100%;
}
td {
position: relative;
min-height: 100%;
}
td a {
position: absolute;
width: 100%;
height: 100%;
top:0;
}
.blockpurp {
background: purple;
width: 60%;
}
.blockyell {
background: yellow;
width: 40%;
}
#loginScreen, #loginScreen2 {
opacity: 0;
position: fixed;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.6);
top: 0;
z-index:1;
color: white;
}
#loginScreen div, #loginScreen2 div {
padding: 20px;
background: rgba(0,0,0,1);
}
.cancel {
position:fixed;
top:0px;
right:0px;
background: transparent;
color:black;
text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
#loginScreen:target, #loginScreen2:target {
opacity: 1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-ms-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
z-index:10;
}
I made the following changes in your html as well:
I took out the divs with the id 'cover'. Unlike classes, you should never have more than one element with a particular id per page. Id's should be completely unique.
I removed the inline styling. Style everything within your stylesheet!
Fiddle for reference
You need to use jquery in order to control mouse click event.
Here is a sample
$(".sample").click(function(){
$(".popup").css({
'visibility': 'visible',
'opacity': 1
});
});
As of yet, there is no way to do an HTML5 transition based on a link click. For now, you can toggle a class and attach the CSS transitions to the element being affected (which is faster + more lightweight anyway). If you attach the transition to the toggled class, then it will only do the transition when the toggled class is removed, not when it's added.
Here's an example that doesn't use jQuery—no reason to include an entire library, if you're not using it elsewhere.
HTML
<a id="clickme" href="#">click me</a>
<div id="test" class="clicked fun here">testing</div>
JavaScript
document.getElementById("clickme").onclick = function (event) {
var target = document.getElementById("test"),
classes = test.className.split(" "),
toggledClass = "clicked";
if (!!~classes.indexOf(toggledClass)) {
// same as if (classes.indexOf(toggledClass) > -1)
test.className = classes.join(" ").replace(toggledClass, "");
} else {
test.className = classes.join(" ") + " " + toggledClass;
}
}
CSS
div {
width: 100px;
height: 3em;
background-color: black;
color: white;
text-align: center;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.clicked {
color: red;
background-color: cyan;
}
fiddle
Related
I'm trying to make a smooth scroll upon click the button (up) as in the gif:
https://elzero.org/wp-content/uploads/2021/04/scroll-to-top-pure-css.gif
the thing is, I'm not allowed to use JavaScript for that, so only HTML and CSS and I don't seem to be able to find a relevant pseudo-class for that. Can any one please help?
here is my HTML:
Up
<p id="one">One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
And here's the CSS:
p {
margin-bottom: 600px;
}
a {
text-decoration: none;
background-color: red;
color: white;
padding: 5px;
position: fixed;
bottom: 40px;
right: 40px;
transition: 1s all linear;
-webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-ms-transition: 1s all linear;
-o-transition: 1s all linear;
}
You can use scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
p {
margin-bottom: 600px;
}
a {
text-decoration: none;
background-color: red;
color: white;
padding: 5px;
position: fixed;
bottom: 40px;
right: 40px;
transition: 1s all linear;
-webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-ms-transition: 1s all linear;
-o-transition: 1s all linear;
}
Up
<p id="one">One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
I created a link that uses css pseudo classes. As seen in css (:before). Everything is fine in an Andriod device but in iPhone it's working on the second click Why...? if there is any solution please help me.
.link{float:left;}
.link a {
color: #000;
font-size: 15px;
font-weight: 400;
padding: 10px;
display: inline-block;
border: 1px solid #b6fe54;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.link a:before {
position: absolute;
content: "";
width: 0px;
background: #b6fe54;
left: 0px;
top: 0px;
height: 100%;
z-index: -1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.link a:hover:before {
width: 100%;
}
<div class="link">Learn More</div>
Add the following
<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(!iOS)
document.write('\x3Cstyle>.link a:hover:before {width: 100%;}\x3C/style>');
</script>
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I have an image that I am trying to have smoothly transition into another image using content: url. It works in changing the images abruptly, however I cannot figure out how to apply the transition to actually make it smoothly transition from one image to another. Is it possible to do this using content?
Here is a JSFiddle showing what I have going on.
You Should use Before after and set opacity and transition on them
In .tidingsimg:after class we add position:absolute and top: 0;margin-top: 10px; Because without it after style will go far below before style
.tidings {
width: 30%;
float: left;
margin: 0 3%;
}
.tidingsimg:before{
content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
position: relative;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:after{
content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
position:absolute;
top: 0;margin-top: 10px;
opacity:0;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.tidingsimg:hover:after{
opacity:1;
}
.tidingsimg:hover:before{
opacity:0;
}
<div class="tidings"></div>
I want to make an effect that would trigger my button transition when I hover the outer div box (parent) that already has its own transition. Can this be done with css or is it in need of some javascript?
My example:
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
position: absolute;
margin-left: 56px;
}
.btn_ani:hover {
background: #ffffff;
color: #99745c;
opacity: 1;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.5s;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
It can be done with CSS. You could simply move the :hover state to the parent .box and the target the descendants like: .box:hover .btn_ani.
In this case elements can have their own transition value.
.box {
height: 300px;
width: 300px;
background: #eeeeee;
float: left;
margin: 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover {
height: 350px;
}
#box_pic1 {
background: url(http://nicholsd.com/_Media/image-15_med.png);
background-repeat: no-repeat;
background-position: relative;
height: 196px;
width: 262px;
margin: 0 auto;
margin-top: 20px;
}
.btn_ani {
font-size: 13px;
text-align: center;
color: #ffffff;
opacity: 0.5;
width: 150px;
background: #99745c;
border:1px solid #99745c;
line-height: 35px;
transition: opacity 0.5s;
/* different transition from the parent */
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s;
transition: all ease 0.7s;
position: absolute;
margin-left: 56px;
}
.box:hover .btn_ani {
background: #ffffff;
color: #99745c;
opacity: 1;
border:1px solid #99745c;
margin-top: 80px;
}
<div class="box">
<a href="www.google.com">
<div id="box_pic1">
<div class="btn_ani">View</div>
</div>
</a>
</div>
If you would like to try some jQuery, you could use a solution such as this:
$('.box').hover(function(){
$('.btn_ani').toggleClass('margin');
});
With the css:
.margin{
margin-top:80px;
}
and here is an example!
I have ben boxing with this issue for ages now.
I have a parent div "wrapper" containing a child div "sidebar-wrapper" consisting of an ul with li in it.
I want "sidebar-wrapper"s height to fit "wrappers" height. My issue is when i set its height to auto goes 0.
My HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
a lit of these li's
</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
Whatever Content!!
</div>
</div>
</div>
</div>
My css:
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:400px;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
See this fiddle
The CSS used is as follows
html,body{
height: 100%;
}
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: 100%;
min-height:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
I've given height:100% for html,body,wrapper and body-content..
Setting height to auto just sets the height equal to the height of the contents of the div..here i think you want the height to be equal to the wrapper..so you'll have to set it to 100%.
and this is how can i see your website after making the specified changes..
Change the sidewrapper height to 100% and give the wrapper a height: see fiddle: See fiddle
#wrapper {
overflow:auto;
border: 1px solid #000000;
width: 100%;
height: auto; /* example height */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
margin-left: -150px;
overflow-y: auto;
background: #000;
height:100%;
float:left;
background-color:#222222;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
Set the parent div's position to relative and children div's to absolute:
#wrapper {
...
...
/**** added css ****/
position:relative;
/*********************/
...
...
}
Edit 1
as you commented, I came to learn that you want the sidebar to available throughout the page regardless the height of the page.
If that is the case then "wrapper" div has nothing to do with.
Just set the position of "sidebar-div" to "fixed" and give proper top and bottom margins according to your page header and footer margins:
and set the top and bottom of child wrapper to 0:
#sidebar-wrapper {
...
...
/**** added css ****/
position:fixed;
top:10px;
bottom:10px;
/*********************/
...
...
}
Here's the updated demo JS fiddle link:
Updated Demo JS Fiddle Link
Hope that helps!