I need some help with the visibility property. I'm trying to make an element appear and once it has appeared keeps being visible. That's this last point that I'm trying to get. I made it appear, but disappears right after the animation.
I suspect the element to take back its hidden value right after the animation ends and I don't know how to make its new visible value stable.
Thanks guys!
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
visibility: hidden;
animation: appearing-menu 0.8s;
animation-delay: 1s;
}
#keyframes appearing-menu {
from {
visibility: visible;
bottom: -50px;
opacity: 0;
}
to {
bottom: 0px;
opacity: 1;
}
}
HTML:
<body>
<h1>The #keyframes Rule</h1>
<div></div>
</body>
Changed animation: appearing-menu 0.8s forwards;
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
forwards
The target will retain the computed values set by the last keyframe
encountered during execution.
and added the visibility: visible to the last frame.
div {
width: 100px;
height: 100px;
background: red;
position: relative;
visibility: hidden;
animation: appearing-menu 0.8s forwards;
animation-delay: 1s;
}
#keyframes appearing-menu {
from {
visibility: visible;
bottom: -50px;
opacity: 0;
}
to {
visibility: visible;
bottom: 0px;
opacity: 1;
}
}
<body>
<h1>The #keyframes Rule</h1>
<div></div>
</body>
Related
AOS fade in should work on scroll, but setting overflow-x and y interferes with the effect. Nothing happens on scroll, fade in only works when i resize the window. I'm using this library: AOS Library
main {
height: 120vh;
perspective: 2px;
overflow-x: hidden;
overflow-y: auto;
}
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.no-parallax {
height: auto;
background-color: #000000;
}
.no-parallax_footer {
z-index: 999;
width: 100%;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: 8;
}
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-quad',
});
</script>
Does someone know how to work around this problem?
I found the same problem here, but it doesn't work on mine.
Solution is to add: <script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>
I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.
You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>
Im trying to implement displaying text when hovering over an image in vue.js but I am a bit stuck. Im trying to implement this example on an array with multiple images:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I got a pretty big vue file but here is the essential:
template:
</template>
[...]
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link #mouseover.native="hovertext" :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
</router-link>
</div>
[...]
</template>
script
<script>
export default {
data() {
return {
info: [
{
id: 1,
title: "Title one",
link: "project1",
hovertext: "project1 hover text lorem lorem lorem",
category_data: {
"1": "Category 1"
}
},
[...]
methods: {
hovertext() {
console.log("");
},
I had some idea to try to use a method to put the text in a div under the image but then I cannot get the text to get above the image on hover. And I cannot get the method right ... Not really sure this is a good way doing it,
I also found this codepen example:
https://codepen.io/oliviaisarobot/pen/xzPGvY
This is pretty close to what I want to do but I cannot get the text to display here either.
I am a bit lost. Any help how to do this in vue?
---------- UPDATE ----------
I want the image boxes to stretch so they always fits the window but I seems to get a gap between my flexbox rows which I cannot seem to get rid of. You can see the white space. I attach my stylesheet.
.list-complete {
display: flex;
height: auto;
flex-direction: row;
flex-flow: row wrap;
}
.list-complete-item {
flex: 0 1 50%;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 100%;
height: auto;
outline: 1px solid #fff;
}
.list-complete-img {
width: 100%;
}
.text {
color: rgb(186, 74, 74);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
height: 60%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #008cba;
}
You don't need to use js(vue) events. Do it with plain css, like in example you linked to.
Go with this template:
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
<div class="overlay">
<div class="text">{{ item.hovertext }}</div>
</div>
</router-link>
</div>
And style it up:
.list-complete-item {
width: 400px;
height: 300px;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 400px;
height: 300px;
}
.list-complete-item a .image {
display: block;
width: 100%;
height: auto;
}
.list-complete-item a .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.list-complete-item a .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
And the final result:
stack!
I have an animation that is assigned to the class .slide
I have on hover on a div, when I hover over the div I want the animation class be assigned to another div. Using CSS animations.
I'd appreciate the help and thanks!
Code:
http://codepen.io/iheartkode/pen/wWMQmG?editors=0110
share-container {
position: relative;
width: 150px;
height: 75px;
background: #FF5722;
border-radius: 10px;
cursor: pointer;
&:hover {
// assign animation class to the share-icons class
}
p {
text-align: center;
color: white;
}
}
.share-icons {
position: absolute;
z-index: -2;
top: 15px;
left: 4px;
margin: 0 auto;
width: 120px;
height: auto;
padding: 10px;
background: coral;
text-align: center;
color: white;
font-size: 2em;
cursor: pointer;
}
.slide {
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
Edited after your clarification:
Change this in your HTML:
<div class="share-icons slide">
And this in your SCSS:
&:hover .slide {
// assign animation class to the share-icons class
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
And then adjust the animation as needed.
And here's a fork in action:
http://codepen.io/denmch/pen/WxrLQZ
heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox