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>
Related
Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and CSS:
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
/* Setting initial 'left' value */
left: 0;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Ease-in only works for text and background but ease-out only works for text but not background.
article {
width: 100%;
height: 1000px;
background-color: #fffff;
color: #00000;
}
article .topnav {
opacity: 0;
transition: background-color .9s ease-out;
transition: background-color .9s ease-in;
-moz-transition: background-color .9s ease-in;
-webkit-transition: background-color .9s ease-in;
}
article .topnav {
background: rgba(0,0,0,0);
transition: opacity .9s ease-out;
transition: opacity .9s ease-in;
-moz-transition: opacity .9s ease-in;
-webkit-transition: opacity .9s ease-in;
}
article:hover p.topnav {
opacity: 0.7;
background-color: #808080;
}
.topnav {
visibility: invisible;
text-align: center;
margin: auto;
width: 50%;
}
<article>
<p class="topnav">I am topnav</p>
</article>
Please see fiddle.
The idea is so that when I hover in and out of , both the text and the background eases in and out together.
Please help.
You are setting both transitions on the unhovered state, thus the second one is overwriting the first rule. You need to apply transition rules to both unhovered and hovered state.
article {
width: 100%;
height: 1000px;
background-color: #fffff;
color: #00000;
}
article p.topnav {
opacity: 0;
background-color: #000;
transition: all .9s ease-out;
}
article:hover p.topnav {
opacity: 0.7;
background-color: #808080;
transition: all .9s ease-in;
}
.topnav {
text-align: center;
margin: auto;
width: 50%;
}
<article>
<p class="topnav">I am topnav</p>
</article>
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
So, here is the deal.. I have a simple radio and a hidden div
<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
</div>
with CSS:
.some-class{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display:none;
background: white;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#radio-id:checked ~ .some-class{
display: block;
background: rgb( 40, 44, 47 );
}
The problem here is that, when the radio is checked, there is no transition at all. The Div appears with the new background, but its not smoothly.
Replace the css with the following
#radio-id:checked ~ .some-class {
display: block;
background: rgb( 40, 44, 47 );
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
html
<html>
<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
hello
</div>
</html>
Css
.some-class{
position: fixed;
top: 100px;
left: 100px;
height:100px;
width: 100px;
display:none;
background: white;
opacity: 0.7;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
#radio-id:checked ~ .some-class{
display: block;
background: rgb( 40, 44, 47 );
}
How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}
The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc