How to change image in card on hover dynamically in Vue js? - html

I am trying to add 2 images in the card on hover in Vue.
When I hover over the card I want a different image and if I remove hovering it should different.
Here is my HTML:
<div class="services">
<h1>Our Services</h1>
<div class="container">
<div
v-for="service in services"
:key="service.title"
#mouseover="isMouseOver = !isMouseOver"
class="card"
:style="
isMouseOver
? 'background-image:' + service.icon + ';'
: 'background-image:' + service.iconGlow + ';'
"
>
<div class="face face1">
<div class="content">
<h3>{{ service.title }}</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>
{{ service.description }}
</p>
Read More
</div>
</div>
</div>
</div>
</div>
Here is my script code:
<script>
export default {
data() {
return {
isMouseOver: true,
services: [
{
icon: require("#/assets/icons/services/webIcon.svg"),
iconGlow: require("#/assets/icons/services/WebLogoGlow.svg"),
title: "Web Development",
description:
"lorem ipsum lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.",
},
{
icon: require("#/assets/icons/services/AppIcon.svg"),
iconGlow: require("#/assets/icons/services/AppIconGlow.svg"),
title: "Mobile Application Development",
description:
"lorem ipsum lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.",
},
{
icon: require("#/assets/icons/services/Cross.svg"),
iconGlow: require("#/assets/icons/services/CrossLogo2.svg"),
title: "Computer Application Development",
description:
"lorem ipsum lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.",
},
],
};
},
};
</script>
Here is my CSS:
.container .card .face.face1 {
position: relative;
background: #333;
/* display: flex; */
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
/* background-image: url("../assets/icons/services/WebLogoGlow.svg"); */
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
}
.container .card:hover .face.face1 {
background: #9376cf;
transform: translateY(0);
/* background-image: url("../assets/icons/services/webIcon.svg"); */
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
}
I want these background images in CSS to be dynamic. How can I do that?

Related

Website background Image height scrolling problem

I have a big "img" background image that is put inside the "Figure" tag as the main background of the site. I set the max-width to 100% and the height to 100% too.
When I start scrolling from the top of my page to the bottom.
As soon as I reach the beginning/top of an image, the scroll stops, then I need to scroll again to reach the bottom of the page. Same as when I scroll from bottom to up. This problem is happening on the touchpad scroll and the keyboard up and down arrows.
I noticed that whether scrolling from top to bottom or bottom to up of the image, the vertical scroll bar doesn't move; it starts moving when I have to scroll again up or down of the site.
However, the following steps are done.
The scrolling worked smoothly when I reduced the "Height" of the img exactly below "86%" in the CSS file. However, "86% - 100%" the problem starts there.
I tried to use the "img" tag, then I replaced it with the "Background-Image: url()" property. Same problem with step one.
I tried to reduce (compress) the image size. Same problem with step one.
I used the "Background-size" with the different values (contain, cover, auto). Same problem with step one.
I used "Background-Attachment: Scroll;" the Same problem as step one.
Updated: I added "P" with a lot of lorem text under the image so that I can scroll enough. The scrolling problem was solved even though the height of the image is "Height: 100%", whether it's "img tag" or "Background-Image: url()"
Thus, the main problem is with the height, but I need the image to be "100%" not below "86%".
Any suggestions, please?
<body>
--Hidden Content--
<!------------------
----MAIN CONTENT----
-------------------->
<main>
<section class="upperpart">
<header class="main_header">
<div class="getoff">
<h2>get rm10 off</h2>
<p>your first order
<span>code:shemya</span>
</p>
</div>
<div class="share">
<h2>share & earn</h2>
<p>up to 15% off</p>
</div>
<div>
<h2>cash on delivery</h2>
</div>
</header>
<figure class="main_figure">
<img src="https://www.lux-review.com/wp-
content/uploads/2022/05/Kids-Fashion.jpg" alt=""
height="85%">
<figcaption></figcaption>
<img src="" alt="">
<div class="figure_ads">
<p>mega year end sale now on</p>
<p>up to <span>80%</span>off</p>
<button>buy now</button>
</div>
</figure>
<section class="middelpart">
--Hidden Content--
</section>
<section class="bottompart">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Reprehenderit fugit earum accusantium non
amet
.</p>
</section>
</main>
main {
width: 100vw;
min-height: 100vh;
margin-top: 15.2rem;
}
main .upperpart {
background-color: antiquewhite;
height: 80rem;
width: 90vw;
margin: 0 auto;
/* visibility: hidden; */
}
.upperpart .main_figure {
width: 90vw;
/* max-height: 60rem; */
position: relative;
}
.upperpart .main_figure img {
max-width: 100%;
height: 100%;
}
main .bottompart p {
font-size: 2rem;
margin-top: 5rem;
}
I tried to reproduce your problem, I don't really see where is the problem.
The only thing I've found is the section upperpart is not close before the main closure.
main {
width: 100vw;
min-height: 100vh;
margin-top: 15.2rem;
}
main .upperpart {
background-color: antiquewhite;
height: 80rem;
width: 90vw;
margin: 0 auto;
/* visibility: hidden; */
}
.upperpart .main_figure {
width: 90vw;
/* max-height: 60rem; */
position: relative;
}
.upperpart .main_figure img {
max-width: 100%;
height: 100%;
}
main .bottompart p {
font-size: 2rem;
margin-top: 5rem;
}
<main>
<section class="upperpart">
<header class="main_header">
<div class="getoff">
<h2>get rm10 off</h2>
<p>your first order
<span>code:shemya</span>
</p>
</div>
<div class="share">
<h2>share & earn</h2>
<p>up to 15% off</p>
</div>
<div>
<h2>cash on delivery</h2>
</div>
</header>
<figure class="main_figure">
<img src="https://www.lux-review.com/wp-content/uploads/2022/05/Kids-Fashion.jpg" alt="" height="85%">
<figcaption></figcaption>
<img src="" alt="">
<div class="figure_ads">
<p>mega year end sale now on</p>
<p>up to <span>80%</span>off</p>
<button>buy now</button>
</div>
</figure>
<section class="middelpart">
--Hidden Content--
</section>
<section class="bottompart">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
</section>
</section>
</main>
I don't have scrolling trouble on this snippet. Do you have?

Why do one grid cell is overlapping another grid cell?

I am currently trying to complete a challenge where I have encountered this issue-
I have selected certain rows and columns of the grid, but my subtitle-img class is still overlapping subtitle2 class.
Can anyone find the possible reason and solution to this problem?
My code:
body{
background: #DCE8FF;
font-family: 'Times New Roman', Times, serif;
animation: fadein 2s ease-in 0s 1 normal forwards;
}
.main-container{
display: grid;
grid-template-columns: 65% 30%;
column-gap: 5%;
}
.subtitle-content-grid{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
}
.subtitle1{
grid-column-start: 1;
grid-column-end: span col2-end;
grid-row-start: 1;
grid-row-end: span 1;
}
.subtitle2{
grid-column-start: 1;
grid-column-end: span col2-start;
grid-row-start: 2;
grid-row-end: span 2;
}
.subtitle-img{
display: -ms-flexbox;
display: flex;
height: auto;
grid-column-start: 3;
grid-column-end: span col3-end;
grid-row-start: 2;
grid-row-end: span 4;
}
.sub-img{
display: -ms-flexbox;
display: flex;
justify-content: center;
flex: 100%;
max-width: 100%;
height: auto;
}
.image-gallery{
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 50%;
max-width: 60%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (min-width: 400px) and (max-width: 1000px) {
.image-gallery {
flex: 100%;
max-width: 100%;
}
}
.image{
margin-top: 8px;
vertical-align: baseline;
width: 46%;
padding: 5px 10px 5px 5px;
}
.sidebar-content{
background: #FFE3BF;
}
.post{
border: 2px solid #FBCA8B;
margin: 5px;
}
.post>h2,p,a{
padding-left: 4px;
}
.post>a:hover{
animation: colorChange 2s ease-out 0s infinite normal;
}
.footer{
background: linear-gradient(#DCE8FF,steelblue);
height: 550px;
}
.contact-form{
margin: 10% 10% 10% 10%;padding: 2% 0 0 0;
animation: slidein 2s ease-in 0s 1 normal forwards;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=submit] {
background-color: rgb(39, 132, 247);
color: white;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: rgb(25, 25, 157);
}
/*Animations*/
#keyframes colorChange{
0%{
color: rgba(0, 145, 255, 0.943);
}
50%{
color: rgb(74, 74, 233);
}
100%{
color: steelblue;
}
}
#keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
#keyframes slidein {
0%{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
-ms-transform:translateX(-100%);
}
100%{
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
-ms-transform:translateX(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="wsc.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Styling Challenge</title>
</head>
<body>
<div class="main-container">
<div class="main-content">
<h1>Welcome to this Challenge</h1>
<p>Here is your list of objectives:</p>
<ul>
<li>Lay out the Content & Sidebar</li>
<li>Create proper margin & spacing around items</li>
<li>Import & Use A Custom Font</li>
<li>Color Scheme: Blue & Orange (Use However you see fit)</li>
<li>Style text appropriately</li>
<li>change the background color of the sidebar</li>
<li>Style image grid however you see fit</li>
<li>Create borders around each sidebar items</li>
<li>Create grid/flexbox for image and text under "Subtitle"</li>
<li>Image grow on hover</li>
<li>Link color change on hover</li>
<li>Page animation sequence for main items (content, sidebar)</li>
</ul>
<p>Do not feel limited by the objective! change or append anything you like. Good Luck!</p>
<div class="subtitle-area">
<div class="subtitle-content-grid">
<div class="subtitle1">
<h2 class="subtitle">Subtitle 1</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, debitis odit. Omnis esse ea aut nisi eos ab, ipsa qui labore sed facilis, quos perspiciatis voluptates aliquid fugiat exercitationem impedit!</p>
</div>
<div class="subtitle2">
<h2 class="subtitle">Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim magni, quam fugit perspiciatis maiores molestias quo totam, saepe obcaecati quia, nulla itaque perferendis culpa suscipit reiciendis reprehenderit! Illum, sapiente earum!</p>
</div>
<div class="subtitle3">
<h2 class="subtitle">Topic 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, officiis. Illum odio quos, magni quam illo modi rerum maxime et minus dolore autem, nihil veniam. Architecto aspernatur temporibus ipsam dolorem.</p>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>amet consectetur adipisicing elit!</li>
</ol>
</div>
<div class="subtitle-img">
<img class="sub-img" src="https://picsum.photos/300/300">
</div>
</div>
</div>
<div class="image-gallery">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
<img class="image" src="https://picsum.photos/300/300">
</div>
</div>
<div class="sidebar-content">
<div class="post">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
<div class="post">
<h2>Post 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Lorem ipsum dolor sit amet
</div>
</div>
</div>
<div class="footer">
<div class="contact-form">
<form action="/action_page.php">
<label >First name:</label><br>
<input type="text" id="fname" placeholder="Your First Name"><br>
<label >Last name:</label><br>
<input type="text" id="lname" placeholder="Your Last Name"><br><br>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Try using this in .subtitle-img
grid-column-start: 3;
grid-column-end: span 3;
grid-row-start: 2;
grid-row-end: span 4;

Grid Template Areas not working using SASS

Hi I've been trying to do this grind layout but it Grid template areas not working. As by code I want to implement it in two rows with 6 columns
#about-a .about-info {
display: grid;
grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
grid-gap: 1.2rem;
}
#about-a .bio-image {
grid-area: bioimage;
}
#about-a .bio {
grid-area: bio;
border: 3px solid #a862ea;
padding: 0.8rem;
}
#about-a .award-1 {
grid-area: aw1;
}
#about-a .award-2 {
grid-area: aw2;
}
#about-a .award-3 {
grid-area: aw3;
}
#about-a .award-1 .fas,
#about-a .award-2 .fas,
#about-a .award-3 .fas {
color: #a862ea;
margin: 1rem;
}
<section id="about-a" class="text-center py-2">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="bottom-line"></div>
<p class="lead">A little about me and what I do..</p>
<div class="about-info">
<img src="image/about_new.jpg" alt="" class="bio-image">
<div class="bio bg-light">
<h4>All of my projects can be found on github..</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, aspernatur enter code hereratione quia natus iure maxime corporis nemo exercitationem harum, inventore voluptate quis nisi commodi dolorum velit laudantium eum. Excepturi, autem!</p>
</div>
<div class="award-1">
<i class="fas fa-award fa-3x"></i>
<h3>Award One</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
</div>
<div class="award-2">
<i class="fas fa-award fa-3x"></i>
<h3>Award Two</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
</div>
<div class="award-3">
<i class="fas fa-award fa-3x"></i>
<h3>Award Three</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
</div>
</div>
</div>
</section>
using dev tools the layout is appearing in singe row as shown below rather than as implemented in CSS and the original defined layout is striked through.
grid-template-areas:
"bioimage"
"bio"
"bio"
"aw1"
"aw2"
"aw3";
You're missing the grid-template-colums: element.
Solution:
#about-a .about-info {
display: grid;
grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
grid-gap: 1.2rem;
grid-template-columns: 200px 300px //for instance
}
If this doesn't work, feel free to comment down here.

How to remove background color when clicked on active class

filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.filterDiv {
float: left;
margin: 2px;
display: none;
}
.btn
{
list-style: none;
display: inline-block;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
cursor: pointer;
}
/* animation duration */
#para
{
animation-duration: 2s;
}
#myBtnContainer
{
display: flex;
overflow-x: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Document</title>
</head>
<body>
<h2>Sample</h2>
<div id="myBtnContainer">
<li class="btn active" onclick="filterSelection('all')"> Show all</li>
<li class="btn" onclick="filterSelection('sam')"> sam</li>
<li class="btn" onclick="filterSelection('jhon')"> jhon</li>
<li class="btn" onclick="filterSelection('rog')"> rog</li>
<li class="btn" onclick="filterSelection('stv')"> stv</li>
<li class="btn" onclick="filterSelection('scott')"> scott</li>
</div>
<div class="container">
<div class="filterDiv all w3-container w3-animate-bottom" id="para">
<h4>what is food</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
<h4>lorem ipsum</h4>
<p> lorem ipsum
</p>
<h4>lorem ipsum</h4>
<p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
<div class="filterDiv sam w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
<h4 >What is the Cricket Live Scores API?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
</p>
</div>
<div class="filterDiv jhon w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
<div class="filterDiv rog w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
<div class="filterDiv stv w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</a></h4>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
</div>
</body>
</html>
The above screenshot is from my phone.
The question is how do I remove the blue colour appearing on background on click of all list tags? I did not add it in my css.
I tried using focus, active in my css, that did not work.
I want to implement this as showed in the following image.
I came across data filtering while I was going through w3schools. I saw some really nice examples online, and I wanted to try one, but I'm stuck at this example because I cannot understand where the blue colour in the image is coming from.
Here is an example of how to use dataset attributes along with JS to change a percentage of movement in the ROOT element to move your HR below the list-item buttons.
You set the HR below the LI elements in your HTML so you can use CSS to target the HR with the unique selector for each button by targeting the HR along with the general sibling selector ~. Set the HR element to absolute and style the width and background color, then you can position it using the left property on hover of each button element .show-all:hover ~ hr.
Now we set the hr's original to a CSS variable
:root {
--active: 24px;
}
Then in the hr element we set the original left property to that variable
left: var(--active);
Then in the JS function that sets your active class you can add the following line: document.documentElement.style.setProperty('--active, this.dataset.active), since we have the percentage of offset set in the data.active attribute, it will now set the clicked buttons percentage of offset to the HR's active variable in the pages style for the HTML element.
I also added a justify-content: space-around to space the buttons out equally, otherwise youb would have to use more code to shorten/enlarge the HR element on hover...
NOTE: there is some kind of padding or margin glich going on with the clicking of your last buttons, I do apologize, but I did not have time to work that part out, but this gives you a good idea of how to achieve the method of active you are looking for.
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
console.log(this.dataset.active)
document.documentElement.style.setProperty('--active', this.dataset.active )
});
}
:root {
--active: 24px;
}
.filterDiv {
float: left;
margin: 2px;
display: none;
}
.btn {
list-style: none;
display: inline-block;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
cursor: pointer;
}
hr {
width: 0.25em;
left: var(--active);
width: 12%;
background-color: purple;
position: absolute;
top: .8rem;
transition: left .3s ease-in-out;
}
.show-all:hover ~ hr {
left: 24px;
}
.sam:hover ~ hr {
left: 24%;
}
.jhon:hover ~ hr {
left: 40%;
}
.rog:hover ~ hr {
left: 56%;
}
.stv:hover ~ hr {
left: 70%;
}
.scott:hover ~ hr {
left: 85%;
}
/* animation duration */
#para {
animation-duration: 2s;
}
#myBtnContainer {
display: flex;
justify-content: space-around;
overflow-x: none;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Document</title>
</head>
<body>
<h2>Sample</h2>
<div id="myBtnContainer">
<li class="btn show-all active" data-active="24px" onclick="filterSelection('all')"> Show all</li>
<li class="btn sam" data-active="24%" onclick="filterSelection('sam')"> sam</li>
<li class="btn jhon" data-active="40%" onclick="filterSelection('jhon')"> jhon</li>
<li class="btn rog" data-active="56%" onclick="filterSelection('rog')"> rog</li>
<li class="btn stv" data-active="70%" onclick="filterSelection('stv')"> stv</li>
<li class="btn scott" data-active="85%" onclick="filterSelection('scott')"> scott</li>
<hr />
</div>
<div class="container">
<div class="filterDiv all w3-container w3-animate-bottom" id="para">
<h4>what is food</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
<h4>lorem ipsum</h4>
<p> lorem ipsum
</p>
<h4>lorem ipsum</h4>
<p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
<div class="filterDiv sam w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
<h4>What is the Cricket Live Scores API?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t
</p>
</div>
<div class="filterDiv jhon w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
<div class="filterDiv rog w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
<div class="filterDiv stv w3-container w3-animate-bottom" id="para">
<h4>lorem ipsum
</h4>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum omnis architecto laborum nam t</p>
</div>
</div>
</body>
</html>

How to Implement different backgrounds on scroll [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I wanted to replicate the effects as shown here -
https://allods.my.com/en/news (not this one, sorry)
http://bit.do/b2692
https://www.google.co.in/sheets/about
Ignoring all the animations, i wanted to know how can we implement multiple different backgrounds as one scrolls down the page.
PS. I am a complete beginner, i prefer to have an HTML/CSS solution only.
You should try to add position fixed property to Your background , it should help.
body,
html,
main {
/* important */
height: 100%;
}
.fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<h1><!-- title goes here--></h1>
</div>
<div class="scrolling-bg cd-color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
</main>
Div after div approach :
body,
html,
main {
/* important */
height: 100%;
padding:0;
margin:0;
}
.container{
position:absolute;
}
.fixed-bg {
min-height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-2">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-3">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-4">
<div class="container"><!-- content goes here--></div>
</div>
</main>
So you are looking for a parallax effect, there is a number of plugins for that. I recently used http://pixelcog.github.io/parallax.js/ which worked out well for me.
It's very simple to use it. You said you want an HTML / css solution for this, but i don't think you can do it without javascript. If someone else knows the alternative without javascript i'd like to see it also. But even if you don't know much about javascript you can use this plugin, just follow the instructions on the link i provided.
The plugin requires jquery to work!