I am making a website for a friend but since I'm still a beginner at this I'm not sure how to proceed. I'm making a simple intro page with his name and an enter button. The enter button has a hover function that when you hover your mouse over it it changes color, meanwhile I have a background div loop that iterates through 5 different backgrounds. My button and its hover function work fine on the first background picture, but once it changes the hover function no longer works until it comes back to that very first picture.
The background changing is a css code I found here on stack while I made everything else.
Here's My Code with what I'm working with.
Any ideas why the button hover isn't working on all the backgrounds?
HTML
<body class="intro-body">
<div id="background-change">
<div class="background-image image1">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image2">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image3">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image4">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image5">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
</div>
</body>
CSS
.intro-body {
text-align: center;
background-repeat: no-repeat;
background-position: center;
}
.intro-title {
padding-top: 20vh;
padding-bottom: 5vh;
font-size: 650%;
text-transform: uppercase;
text-align: center;
color: white;
letter-spacing: 5px;
text-shadow: 2px 2px black;
}
.intro-button {
border: solid;
color: white;
padding: 20px 45px;
display: inline-block;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
p.intro-button-hover:hover {
background-color: white;
opacity: 0.85;
padding: 23px 48px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color: black;
border: unset;
cursor: pointer;
}
.background-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.image1{
background: url("http://placekitten.com/1200/1200") no-repeat center fixed;
}
.image2{
background: url("http://placekitten.com/1200/1300") no-repeat center fixed;
}
.image3{
background: url("http://placekitten.com/1300/1200") no-repeat center fixed;
}
.image4{
background: url("http://placekitten.com/1300/1300") no-repeat center fixed;
}
.image5{
background: url("http://placekitten.com/1300/1400") no-repeat center fixed;
}
#keyframes backgroundchangeFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes backgroundchangeFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#background-change div:nth-of-type(1) {
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
#background-change div:nth-of-type(2) {
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
#background-change div:nth-of-type(3) {
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#background-change div:nth-of-type(4) {
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
#background-change div:nth-of-type(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#background-change div {
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 25s;
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 25s;
}
Just update with the following code, I have just added internal js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "white");
});
$("p").mouseout(function(){
$("p").css("background-color", "");
$("p").css("color", "black");
});
});
And remove the properties with '//' in the css:
p.intro-button-hover:hover {
// background-color: #fff;
//opacity: 0.4;
padding: 23px 48px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
//color: black;
border: unset;
cursor: pointer;
}
Quickly looking at this, the reason for it is that you actually have 5 different buttons fading in and out, which messes things up.
Do something like this (pseudocode)
<body class="intro-body">
<div id="callout">
<h1 class="intro-title">Name Here</h1>
<button class="intro-button intro-button-hover">Enter</button>
</div>
<div id="background-change">
<div class="background-image image1"></div>
<div class="background-image image2"></div>
<div class="background-image image3"></div>
<div class="background-image image4"></div>
<div class="background-image image5"></div>
</div>
</body>
Naturally position the callout section over the background image and you're good to go.
I have gone through your code and tried debugging the problem. The problem is mostly from your animation code. Try rewriting your animation code. I have tested it removing the animation code, to check if the hover is working properly or not, and it works fine. There is also a bug with your animation code which makes the Enter button disappear for a while after the first animation iteration and appear again after few seconds.
If possible try using JQuery, as it makes your job easier for using animations. For example, can simply use fadeIn(); and fadeOut(); functions for the animation you have been doing in your CSS animation code.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I'm trying to scale a div which contains a background image when an anchor link is hovered upon.
I have seen similar questions before, namely this one. The solution here however, isn't ideal for me as my hover effect triggers when the anchor link is hovered upon (therefore cannot use pointer-events).
Essentially, when someone hovers over .card__link, I want to scale .card__image.
How do I go about this?
.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.card__link:hover ~ .card__image {
transform: scale(1.2);
}
<div class="card">
<div class="card__overflow">
<div class="card__image"></div>
</div>
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
</div>
The actual code for hover should be like this in the css please check for the css changes that has been made it works like that.
.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.card__body:hover~.card__overflow {
transform: scale(1.2);
}
<div class="card">
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
<div class="card__overflow">
<div class="card__image"></div>
</div>
</div>
It can be easily done with JS.
const link = document.querySelector(".card__link");
const image = document.querySelector(".card__image");
link.addEventListener("mouseenter", () => {
image.classList.add("scale-up")
image.classList.remove("scale-down")
})
link.addEventListener("mouseleave", () => {
image.classList.remove("scale-up")
image.classList.add("scale-down")
})
.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.scale-up {
transform: scale(1.2);
}
.scale-down {
transform: scale(1);
}
<div class="card">
<div class="card__overflow">
<div class="card__image"></div>
</div>
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
</div>
So currently i am finishing a website via Codeanywhere for one of my college classes and i can't seem to get rainbow text to work with my code.
I have attempted to work through this >> https://w3bits.com/rainbow-text/
But with no successful outcomes being made.
#media only screen and (min-width: 1025px) {
.navbar-item img {
max-height: 50px;
}
.column {
border-radius: 10px;
box-shadow: 0px 1px 10px 3px black;
margin-right: 20px;
background-color: #201f20;
}
.rainbow-text {
background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
text-align: center;
background-size: 800% 800%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 24px;
animation: rainbow 8s ease infinite;
}
#keyframes rainbow {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 25%
}
100% {
background-position: 0% 50%
}
}
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title" style="">
1st Level - Clearnet
</h1>
<hr style="background-color: grey; margin-bottom: 40px;">
<div class="column">
<a imageanchor="1"><img align="right" src="../images/imagine.jpg" border="0"></a>
<div class="ranbow-text">
<p class="subtitle">
Imagine there is a large paragraph of text here
</p>
</div>
</div>
</div>
</div>
So essentially i am attempting to get "imagine there is a large paragraph of text here" to be rainbow coloured. So far i have failed and now need help.
you have a typo in <div class="ranbow-text"> you are missing an 'i' -> <div class="rainbow-text">.
In addition, your styles will only apply if the window is over 1025px wide as per your media query, so when running the code in the small box in stackoverflow.com it won't work even when you fix the typo. It is also possible that you are developing with the dev tools open in the same window and that takes some of your width and thus you are unable to see the rainbow colors.
See working example from your code below:
#media only screen and (min-width: 200px) {
.navbar-item img {
max-height: 50px;
}
.column {
border-radius: 10px;
box-shadow: 0px 1px 10px 3px black;
margin-right: 20px;
background-color: #201f20;
}
.rainbow-text {
background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
text-align: center;
background-size: 800% 800%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 24px;
animation: rainbow 8s ease infinite;
}
#keyframes rainbow {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 25%
}
100% {
background-position: 0% 50%
}
}
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title" style="">
1st Level - Clearnet
</h1>
<hr style="background-color: grey; margin-bottom: 40px;">
<div class="column">
<a imageanchor="1"><img align="right" src="../images/imagine.jpg" border="0"></a>
<div class="rainbow-text">
<p class="subtitle">
Imagine there is a large paragraph of text here
</p>
</div>
</div>
</div>
</div>
I am trying to figure out how I can write a CSS animation that allows an image (id: slam) to suddenly appear on screen and cover all of the content without displacing any of the text. So far, this is what I have:
HTML:
body{
height: 100%;
}
div{
overflow: auto;
text-align: center;
}
#-webkit-keyframes slam-animation {
0% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) scale(1);
}
}
#slam {
-webkit-animation-name: slam-animation;
-webkit-animation-duration: 1s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
<body>
<img id="slam" src="assets/images/Undesirable.jpg" alt = "undesirable">
<header>
<h1>Text</h1>
</header>
<div class="main_game">
<p>Stuff</p>
<div class = "col-xs-2">
</div>
<div class = "left_box col-xs-4">
<p>Stuff</p>
</div>
<div class = "right_box col-xs-4">
<p>Stuff</p>
</div>
<div class = "col-xs-2">
</div>
</div>
</body>
Use position:absolute to your image.
Using absolute position the element is removed from the normal document flow; no space is created for the element in the page layout i.e. it will not affect the position of other elements.
Reference Link to understand position absolute
Stack Snippet
body {
height: 100%;
}
.main_game div {
text-align: center;
}
.main {
position: relative;
}
#-webkit-keyframes slam-animation {
0% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) scale(1);
}
}
img#slam {
position: absolute;
top: 0;
left: 0;
}
#slam {
-webkit-animation-name: slam-animation;
-webkit-animation-duration: 1s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
<div class="main">
<img id="slam" src="http://via.placeholder.com/350x350" alt="undesirable">
<header>
<h1>Text</h1>
</header>
<div class="main_game">
<p>Stuff</p>
<div class="col-xs-2">
</div>
<div class="left_box col-xs-4">
<p>Stuff</p>
</div>
<div class="right_box col-xs-4">
<p>Stuff</p>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
I am building a landing page with angular and in my third div from top I have some animations. First div occupies 100vh viewspace, another say 50 and then I have following div (all these divs represent individual components):
<div id="about" class="app-about-us-div-container">
<div class="onboarding-flow mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<div class="circle circle-1">
<i class="onboarding-icon material-icons">local_phone</i>
</div>
<div class="onboarding-text">
<p>Tell us your problem domain and we will customize our solution to meet your specific needs</p>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="circle circle-2">
<i class="onboarding-icon material-icons">group</i>
</div>
<div class="onboarding-text">
<p>Engage your project stakeholders, end users without any time hassle to build together a clear product vision</p>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="circle circle-3">
<i class="onboarding-icon material-icons">trending_up</i>
</div>
<div class="onboarding-text">
<p>Benefit from our analytics to understand your users and their vision for the product. Build Personas to take best design decisions and streamline important product features </p>
</div>
</div>
</div>
</div>
It's css:
.app-about-us-div-container{
position: relative;
height: 70vh;
text-align: center;
background-color: #ECEFF1;
}
.app-about-us-div-container h4{
margin-top: 0%;
padding-top: 20px;
}
.onboarding-flow {
align-content: center;
padding-top: 2%;
}
.circle {
display: inline-block;
width: 150px;
height: 150px;
box-sizing: border-box;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
background: transparent;
text-align: center;
border: 3px solid #cccccc;
animation-name: pop;
animation-iteration-count: 1;
animation-duration: 0.3s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
color: #cccccc;
}
.circle-1 {
animation-delay: 1s;
}
.circle-2 {
animation-delay: 2s;
}
.circle-3 {
animation-delay: 3s;
}
.onboarding-icon {
align-self: center;
font-size: 65px;
position: relative;
top: calc(50% - 35px);
}
.onboarding-text {
position: relative;
padding-top: 2%;
width: 60%;
left: 20%;
}
.onboarding-text p {
font-size: 17px;
}
#keyframes pop {
0% {
color: #F44336;
transform: scale(1);
}
50% {
color: #ffffff;
border-color: #F44336;
background-color: #F44336;
transform: scale(1.2);
}
100% {
color: #ffffff;
border-color: #EF5350;
background-color: #EF5350;
transform: scale(1);
}
}
Now the problem is animations are played on pageload and till the user reaches to this div it's over. How can I make sure that these animations are played when this div is in viewport or at the top of the screen (I am not sure what could be the best option as the div above occupies 50vh so at one point both of them are visible 50 50)? Is anular animation of any help in this case?
It's component:
#Component({
selector: 'app-about-us',
templateUrl: './about-us.component.html',
styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
I used ng-in-viewport to achieve something similar to this. Follow the instructions available on the plugin's GitHub page:
1. Install the plugin
npm install --save ng-in-viewport intersection-observer
Note: intersection-observer is a polyfill used to support all major browsers
2. Usage Example
In your module:
import { InViewportModule } from 'ng-in-viewport';
import 'intersection-observer';
In your template:
<div in-viewport (inViewportAction)="action($event)" class="circle circle-1">
<i class="onboarding-icon material-icons">local_phone</i>
</div>
In your component:
action(event : any) {
//do something with the element
}
You could for example use Angular's Renderer to add a css class to the element:
import {Renderer2 } from '#angular/core';
...
constructor(private renderer: Renderer2) {}
action(event : any) {
if(event.value){ //if element is in viewport
this.renderer.addClass(event.target, "circle-1");
}
}
I have created a div that uses a linear gradient. When I zoom out (and or zoom in) my gradient shrinks and grows depending on how much I zoom out or in, I set a specific width to try to stop this. It didn't work.
body{
background: linear-gradient(200deg,#aebcbf -10%,#6e7774 110%,#0a0809 1000%);
background-repeat:no-repeat
}
img {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration:1s;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-play-state: playing;
float: left;
opacity:0.5;
border-radius:90%;
}
h1{
font-size:20px;
font-family: monospace;
font-variant-caps:titling-caps;
text-align:center;
text-decoration-style: wavy;
text-shadow: 2px 2px #FFFFFF;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#css-gradient {
background: linear-gradient(blue, white);
width:47%;
border-style:outset;
background-repeat:no-repeat
}
<div id="css-gradient">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<img src="http://i.imgur.com/gQioYac.png" draggable="false">
<div style="clear: left;"></div>
<input type=color style="width:15px;height:100px;position:absolute;left:635px;top:8px;height:125px">
<h1 title="If successful this will be in a white box">Hover over me!</h1>
<hr style="width:300px;position:relative;top:-5px;border-style:double">
</div>
Here's a JSFiddle (https://jsfiddle.net/ffksjqp2/1/)
Im not sur I understood your problem. Do you mean a zoom in / zoom out with your browser ?
Anyway you can try this with your css-gradient class :
#css-gradient {
background: linear-gradient(blue, white);
background-attachment: fixed;
width:47%;
border-style:outset;
background-repeat:no-repeat
}