How to scale out.pop up image when i hover?

How to scale out.pop up image when i hover? - javascript

I have an image that i want to scale out when it has hovered.
code is written with react and css. What am i doing wrong?
Here is my gist which include style sheet as well as js code
react/js code
import React from 'react';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import ScreenHeading from '../../utilities/ScreenHeading/ScreenHeading';
import ScrollService from '../../utilities/ScrollService';
import Animations from '../../utilities/Animations';
import './Certificates.css';
import clf from '../../img/Certs/clf.png';
import shape from '../../img/Certs/shape-bg.png';
export default function Certificate(props) {
let fadeInScreenHandler = (screen) => {
if (screen.fadeInScreen !== props.id) return;
Animations.animations.fadeInScreen(props.id);
};
const fadeInSubscription =
ScrollService.currentScreenFadeIn.subscribe(fadeInScreenHandler);
const options = {
loop: true,
margin: 0,
nav: true,
animateIn: 'bounceInRight',
animateOut: 'bounceOutRight',
dots: true,
autoplay: true,
smartSpeed: 1000,
responsive: {
0: {
items: 1,
},
768: {
items: 1,
},
1000: {
items: 3,
},
},
};
return (
<div>
<ScreenHeading
title={'Certifications'}
subHeading={'I love validating my skills'}
/>
<section className="testimonial-section fade-in" id={props.id || ''}>
<div className="container">
<div className="row">
<OwlCarousel
className="owl-carousel"
id="testimonial-carousel"
{...options}
>
<div className="col-lg-12">
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
Learning about core aws services, shared responsibility
model and billing and pricing concepts was an eyeopener
for me as a cloud engineer.
<i className="fa fa-quote-right" />
</p>
</div>
<div className="client-info">
<img src={clf} alt="no internet connection"></img>
<h5>AWS CLF-01</h5>
<p></p>
</div>
</div>
</div>
<div className="col-lg-12">
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
Coming Soon 💯
<i className="fa fa-quote-right" />
</p>
</div>
<div className="client-info">
{/* <img src={mike} alt="no internet connection"></img> */}
<h5>AWS SAA</h5>
</div>
</div>
</div>
<div className="col-lg-12">
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
Coming Soon 💯
<i className="fa fa-quote-right" />
</p>
</div>
<div className="client-info">
{/* <img src={clf} alt="no internet connection"></img> */}
<h5>AWS DVA</h5>
</div>
</div>
</div>
</OwlCarousel>
</div>
</div>
</section>
<div className="footer-image">
<img src={shape} alt="Phot0 not responding" />
</div>
</div>
);
}
css
.testimonial-section {
padding: 80px 0 80px;
background-image: url('../../../src/assets/Certificates/bg-1.jpg');
background-position: center;
background-attachment: fixed;
position: relative;
z-index: -1;
}
.testimonial-section::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.85;
background-color: #1f2235;
}
.footer-image {
width: 100%;
height: 100%;
max-width: 1920px;
overflow: hidden;
display: flex;
justify-content: center;
margin-top: -110px;
}
.footer-image img {
max-width: 100%;
height: 130px;
}
.testimonial-section .testi-item {
background-color: white;
padding: 30px;
border-radius: 50px 50px 50px 0px;
}
.testimonial-section .testi-item p {
font-size: 16px;
line-height: 26px;
font-weight: 500;
margin: 0 0 10px;
font-style: italic;
}
.testimonial-section .testi-item p .fa-quote-left {
margin-right: 5px;
color: tomato;
}
.testimonial-section .testi-item p .fa-quote-right {
margin-left: 5px;
color: tomato;
}
.testimonial-section .client-info {
position: relative;
padding-left: 80px;
padding-top: 5px;
min-height: 60px;
}
.testimonial-section .client-info img {
height: 70px;
width: 70px;
border: 2px solid transparent;
border-color: black;
left: 30px;
top: -4px;
border-radius: 50%;
position: relative;
}
.testimonial-section:hover .client-info img {
transform: scale3D(1.5, 1.5, 1.5);
}
.testimonial-section .client-info h5 {
font-size: 20px;
font-weight: 600;
line-height: 26px;
margin: 0 0 2px 10px;
position: absolute;
}

Try writing like this
.testimonial-section:hover .client-info img {
transform: scale3D(1.5,1.5,1.5);
}
or
.testimonial-section .client-info img:hover {
transform: scale3D(1.5,1.5,1.5);
}

In this case transform: scale(1.5); should work. This is a working example (not with your code)
.image-box {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid gray;
overflow: hidden;
}
.image-box img {
width: 100px;
height: 100px;
transition: 300ms;
}
.image-box img:hover {
transform: scale(1.5);
}
<div class="image-box">
<img src="https://static-cdn.jtvnw.net/emoticons/v2/25/default/dark/1.0" alt="">
</div>
With your HTML/CSS
.client-info img {
height: 70px;
width: 70px;
border: 2px solid transparent;
border-color: black;
left: 30px;
top: -4px;
border-radius: 50%;
position: relative;
}
.client-info h5 {
font-size: 20px;
font-weight: 600;
line-height: 26px;
margin: 0 0 2px 10px;
position: absolute;
}
.client-info:hover img {
transform: scale3D(1.5, 1.5, 1.5);
}
<div class="client-info">
<img src="https://static-cdn.jtvnw.net/emoticons/v2/25/default/dark/1.0" alt="no internet connection"></img>
<h5>AWS CLF-01</h5>
<p></p>
</div>

Related

Button disappears after several click

I really struggling with doing the same thing in infinite try.
I'm trying to add same functionality to similar element using Foreach on the parent element.
everything went well until I hit the buttons several times, it just disappear.
I think the problem is in the loop, I welcome any kink of comments.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
}
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<div>
<p class="user_name">Mor Maz</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<div>
<p class="user_name">Mor Maz</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
</body>
</html>
I will appreciate any kind of help
thank you

I checked it out and found that the active_arr class the the one that is causing the problem, the buttons are not disappearing but just moving outside the boundary of the parent container which has a overflow: hidden; property. You are forgetting to remove the arctive_arr class from the opposite button do as follows and it will work
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
cancel.classList.remove("active_arr");
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
arrow.classList.remove("active_arr");
});
});
Tho there is still a padding issue I can see you can fix it on your own

You are adding "active_arr" but you never remove it.
Your css are hiding the buttons then:
.active_arr {
transform: translate(80%, 80%);
}

Output Percentage with accordion in each of every multi-step forms once submitted

I am really new in web development. So I really need some guides, tips and tricks on how to do coding. So here's the details...
After I fill up my Yes and No checkboxes forms on each steps of a multi form steps, I want to have a grade on each steps. for example Leadership Development has a 12 Yes and 8 No and the system will calculate it's percentage from
(This is the pie chart) & (This is the accordion)
0 to 49% Your leadership skills will need to be improved for your business to at least
survive.
50% to 70% You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100% You have very good leadership skills to help your organization grow.
How to show it's pie chart with percentage inside of it and beside the pie is an accordion which will also give details from the ratings.
Please I really need help on this one.
Here's the progress bar I made for an example
<style>
#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}
</style>
<div class="row">
<div class="col-lg-6">
<div class="progress-pie-chart" data-percent="24">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="60">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="95">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 align-items-stretch">
<button class="accordion">Leadership Development System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Marketing System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Financial System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

How can I keep my site/image centered when browser size shrinks?

So I am new to the front end world, and trying to get my image to stay center when I shrink the browser. How would I go about doing this? I tried a couple things but I couldn't quite get it to work. Everything looks great before I make the browser smaller. Is it a simple line in my css I need to add or is it more complicated than that?
My image
EDIT: added a screenshot of what's happening even after I do margin 0 auto. Same issue.
$(document).ready(function() {
console.log('loaded')
var weapons = [{
"name": "44_pistol",
"damage": 48,
"ammo": 150,
"fire_rate": 6,
"range": 119,
"accuracy": 66,
"weight": 4.2,
"value": 99,
},
{
"name": "10mm_pistol",
"damage": 18,
"ammo": 300,
"fire_rate": 46,
"range": 119,
"accuracy": 61,
"weight": 4.2,
"value": 53,
},
{
"name": "assault_rifle",
"damage": 30,
"ammo": 400,
"fire_rate": 40,
"range": 119,
"accuracy": 72,
"weight": 13.1,
"value": 144,
}
];
$('#pic1').on('click', function picture() {
console.log('loaded')
var pic = '44_pistol.png'
document.getElementById('pic1').src = pic.replace('90x90', '225x225');
})
$('.item-list a').on('click', function(e) {
var current_item = $(e.currentTarget).attr('class');
console.log(current_item);
for (item in weapons) {
if (weapons[item].name == current_item) {
console.log(weapons[item])
var container = $('.item-stats');
container.find('.damage').html(weapons[item].damage);
container.find('.ammo').html(weapons[item].ammo);
container.find('.fire_rate').html(weapons[item].fire_rate);
container.find('.range').html(weapons[item].range);
container.find('.accuracy').html(weapons[item].accuracy);
container.find('.weight').html(weapons[item].weight);
container.find('.value').html(weapons[item].value);
};
}
});
$('.item-list a').on('click', function(e) {
$('.item-list a').removeClass('active');
$(e.currentTarget).addClass('active');
});
});
#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
body {
font-family: Pipboy, sans-serif;
color: #14fe17;
background-color: #292f26 !important;
}
body::after {
height: 100%;
width: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .04) 1px, transparent 1px, transparent 2px);
opacity: .3;
z-index: 1000000;
pointer-events: none;
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
}
.navbar.navbar-light::before,
.navbar.navbar-light::after {
height: 5px;
width: 2px;
content: "";
position: absolute;
display: block;
z-index: 5000;
background: #14fe17;
;
bottom: -7px;
}
.navbar::before {
left: 0px;
}
.navbar::after {
right: 0px;
}
li.navbar-item.active {
width: 230px !important;
}
ul>li.nav-item>a.nav-link,
ul>li.navbar-item.active>a.nav-link {
color: #14fe17 !important;
font-size: 32px;
line-height: 22px;
padding-bottom: 0px;
flex: 1 1 auto;
text-align: center
}
.navbar-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 26px;
top: 14px;
background: #272b23;
border-left: 2px solid;
border-right: 2px solid;
border-top: 2px solid;
left: 0px;
flex: 1 1 auto;
text-align: center
}
.navbar-light .navbar-nav>li.navbar-item.active>.nav-link {
text-align: center;
width: 100%;
margin: auto;
font-size: 32px;
line-height: 22px;
padding-bottom: 0px;
z-index: 50;
position: relative;
background: #262b23
}
.navbar-nav {
width: 100%;
}
.navbar-light ul.navbar-nav>li {
display: block;
position: relative;
width: 10%;
}
.center-image {
position: absolute;
margin-left: 360px;
object-fit: cover !important;
object-position: 50% 50% !important;
}
.center-image img {
background: transparent;
display: block;
position: relative;
max-height: 300px;
margin-top: 100px;
filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
object-fit: cover !important;
object-position: 50% 50% !important;
}
#targetImg {
height: 200% !important;
width: 200% !important;
max-height: 1000px !important;
margin-top: 150px !important;
}
.pip-footer {
position: fixed;
bottom: 0;
width: calc(100% - 20px);
margin: 0px;
}
.navbar.navbar-light .navbar-nav {
margin: 0px 200px;
}
.navbar.navbar-light .navbar-nav>li {
padding: 0px 20px;
}
.nav.nav-tabs {
margin: 20px;
border-bottom: none;
}
.nav.nav-tabs>.nav-item>.nav-link:hover {
border: 1px solid transparent;
}
.nav.nav-tabs>li>a {
font-size: 26px !important;
background: transparent !important;
border: 1px solid transparent !important;
padding: 5px 10px;
}
.nav.nav-tabs>li:nth-child(2)>a {
opacity: .5;
}
.nav.nav-tabs>li:nth-child(3)>a {
opacity: .2;
}
.level-progress {
width: 100%;
height: 10px;
border: 2px solid;
display: inline-block;
width: 70%;
}
.level-progress-indicator {
height: 6px;
background: #14fe16;
position: relative;
width: 70%;
}
.navbar.navbar-light.pip-footer {
border: none;
font-size: 22px;
}
.navbar.pip-footer .col-3,
.navbar.pip-footer .col-6 {
background: rgba(16, 255, 0, 0.15);
padding: 5px 5px;
}
.navbar.pip-footer .col-6 {
margin: 0px 5px;
flex: 0 0 48%;
}
.stat-bar {
width: 60px;
margin: auto;
}
#status P {
max-width: 400px;
margin: auto;
}
.stat-bars>.row {
margin-bottom: 125px;
}
#top-stat-bar {
margin-top: 60px;
margin-bottom: 100px;
padding-top: 25px;
}
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w30 {
width: 30%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w70 {
width: 70%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.tab-content {
margin-right: 80px;
}
.stat-numbers {
margin-top: -75px;
}
.stat-numbers .col-1 {
background: rgba(16, 255, 0, 0.15);
margin-right: 4px;
max-width: 4%;
}
.stat-numbers .col-2 {
background: rgba(16, 255, 0, 0.15);
margin-right: 4px;
max-width: 9%;
;
}
.stat-numbers .col-1.transparent,
.stat-numbers .col-2.transparent {
background: transparent;
}
.stat-numbers img {
background: transparent;
width: 100%;
filter: grayscale(1) brightness(200) contrast(0) sepia(100%) hue-rotate(55deg) saturate(20);
}
.stat-numbers img.sm-image {
width: 17px;
margin-left: -5px;
}
.stat-numbers img.helmet-icon {
width: 80%;
margin-left: 8px;
margin-top: 5px;
}
.spacer-numbers {
width: 335px
}
#status.tab-pane.full {
width: 100%;
max-width: 100%;
}
.item-list {
float: left;
padding: 0px;
list-style: none;
margin: 0px;
}
.item-list li a {
display: block;
width: 300px;
padding: 5px 10px;
border-radius: 2px;
color: #14fe17;
padding-left: 25px;
text-decoration: none !important;
}
.item-list li a:hover {
text-decoration: none;
background: #14fe17;
color: #272b23;
}
.item-list a.active::before {
content: "";
display: block;
position: absolute;
height: 10px;
width: 10px;
background: #14fe17;
left: 25px;
margin-top: 7px;
}
.item-list a.active:hover::before {
background: #272b23;
}
.tab-pane.full {
height: calc(100vh - 180px);
}
.item-stats {
position: absolute;
right: 0px;
bottom: 50px;
width: 200px;
}
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
.item-stats .row .col-12 {
background: rgba(16, 255, 0, 0.15);
margin-bottom: 2px;
}
#pic1 {
display: block;
width: 250px;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/pipboy.app.css" />
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light ">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="navbar-item active">
STAT
</li>
<li class="nav-item">
INV
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATA</a>
</li>
<li class="nav-item">
MAP
</li>
<li class="nav-item">
RADIO
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href='#status' class="nav-link" data-toggle="tab" role="tab">
STATUS
</a>
</li>
<li class="nav-item">
<a href='#special' class="nav-link" data-toggle="tab">
SPECIAL
</a>
</li>
<li class="nav-item">
<a href="#perks" class="nav-link" data-toggle="tab">
PERKS
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="status" role="tabpanel">
<div class="center-image">
<img src="vb.png" />
</div>
</div>
<div class="stat-bars">
<div class="row" id="top-stat-bar">
<div class="col-12 ">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-8">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w40" width="70%"></div>
</div>
</div>
</div>
<div class="col-0">
</div>
<div class="col-0">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w90" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w70" width="70%"></div>
</div>
</div>
</div>
<div class="col-0">
</div>
<div class="col-0">
<div class="stat-bar">
<div class="level-progress w60">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w30" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row stat-numbers">
<div class="spacer-numbers"></div>
<div class="col-2">
<img src="gun.png" class="img-responsive">
</div>
<div class="col-1">
<div class="icon">
<img src="crosshair.png" class="sm-image img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-1 transparent">
</div>
<div class="col-2">
<img src="helmet2.png" class=" helmet-icon img-responsive">
</div>
<div class="col-1">
<div class="icon">
<img src="energy.png" class=" energy-icon img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-1">
<div class="icon">
<img src="nuclear.png" class=" nuclear-icon img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-2 transparent"></div>
</div>
<div class="tab-pane" id="special" role="tabpanel">
</div>
<div class="tab-pane" id="perks" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<navbar class="navbar navbar-expand-lg navbar-light pip-footer">
<div class="container-fluid">
<div class="col-3">
HP 90/90
</div>
<div class="col-6">
<span> LEVEL 1 </span>
<div class="level-progress">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
<div class="col-3">
AP 50/50
</div>
</div>
</navbar>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/pipboy.app.js"></script>
</body>
</html>

You can ignore your center-image function and replace center-image img with this instead and it will center on all devices. The key to this is margin:0 auto;. Which sets the left and right margins to auto.
.center-image img {
margin:0 auto;
background: transparent;
display: block;
max-height: 300px;
margin-top: 100px;
filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
}

Do not show the js content while the page is loading

I faced the following problem: I have a simple javascript - section, (.custom-social-proof) with a different content load and rotatation. Everything is fine except for one moment - Often, until the page is fully loaded, I see all the elements. What am I doing wrong? I'm quite new to javascript, so I will be very grateful to find some help.
(function(jQuery){
jQuery.fn.extend({
rotaterator: function(options) {
var defaults = {
fadeSpeed: 900,
pauseSpeed: 9000,
child:null
};
var options = jQuery.extend(defaults, options);
return this.each(function() {
var o =options;
var obj = jQuery(this);
var items = jQuery(obj.children(), obj);
items.each(function() {jQuery(this).hide();})
if(!o.child){var next = jQuery(obj).children(':first');
}else{var next = o.child;
}
jQuery(next).slideToggle(o.fadeSpeed, function() {
jQuery(next).delay(o.pauseSpeed).slideToggle(o.fadeSpeed, function() {
var next = jQuery(this).next();
if (next.length == 0){
next = jQuery(obj).children(':first');
}
setTimeout(function() {
jQuery(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
}, 9000); // pause between slides
})
});
});
}
});
})(jQuery);
.custom-social-proof {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999999999999 !important;
}
.custom-social-proof .custom-notification {
width: auto;
min-width: 280px;
text-align: left;
z-index: 99999;
box-sizing: border-box;
font-weight: 400;
box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.08);
border-radius: 50px;
background-color: #fff;
position: relative;
cursor: pointer;
padding: 10px 15px;
border: 2px solid #344bc1;
}
.custom-social-proof .custom-notification .custom-notification-container {
display: flex !important;
align-items: center;
height: 80px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
max-height: 50px;
width: 50px;
padding: 0px 5px 0px 10px;
object-fit: cover;
}
.custom-social-proof .custom-notification .custom-notification-container .warning {
border: 1px;
background-color: #fbe8e8;
border-color: #ffa9a9;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
margin: 0;
height: 100%;
color: gray;
padding-left: 10px;
padding-right: 20px;
border-radius: 0 50px 50px 0;
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
background: #fff;
}
.custom-notification-image-wrapper.pulse img {
margin-top: 0;
}
.custom-notification-content strong {
color: #575757;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
font-family: inherit !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px;
line-height: 18px;
color: #616161;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a {
color: #354cc5;
text-decoration-color: #354cc5;
font-size: 18px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a:hover {
color: #354cc5;
text-decoration-color: #354cc5;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small {
margin-top: 3px !important;
display: block !important;
font-size: 12px !important;
opacity: 0.8;
}
.custom-social-proof .custom-notification .custom-close {
position: absolute;
top: 8px;
right: 28px;
height: 12px;
width: 12px;
cursor: pointer;
transition: 0.2s ease-in-out;
transform: rotate(45deg);
opacity: 0;
}
.custom-social-proof .custom-notification .custom-close::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: gray;
position: absolute;
left: 0;
top: 5px;
}
.custom-social-proof .custom-notification .custom-close::after {
content: "";
display: block;
height: 100%;
width: 2px;
background-color: gray;
position: absolute;
left: 5px;
top: 0;
}
.custom-social-proof .custom-notification:hover .custom-close {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="all-social-proofs">
<section class="custom-social-proof"><!-- Popup item 1 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
<section class="custom-social-proof"><!-- popup item 2 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
<section class="custom-social-proof"><!-- popup item 2 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
<section class="custom-social-proof"><!-- popup item 2 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
</div>
<script>
jQuery(document).ready(function() {
jQuery('#all-social-proofs').rotaterator();
});
</script>

You could hide the parent class by default then reveal it once you have hidden the children.
<div id="all-social-proofs" style="display:none">
...
and
jQuery(document).ready(function() {
jQuery('#all-social-proofs').rotaterator();
jQuery('#all-social-proofs').show();
});

Target This and Class not working as expected

For some reason, as you can see in my pen, when I hover over a learn more button it adds the details class to all the cards.
I've tried with no luck :
$(this).find('element')
And :
('', this)
//slick slider
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
//tilt
$('.tilt-card').tilt({
perspective: 1000,
})
//show details
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
$(document).ready(function() {
$('button').hover(function() {
$(this).text('Read More');
}, function() {
$(this).text('Learn More');
});
});
//scroll text
$(document).ready(function() {
var count;
var interval;
$(".faction-more-btn").on('mouseover', function() {
var div = $('.description-container');
interval = setInterval(function() {
count = count || 1;
var pos = div.scrollTop();
div.scrollTop(pos + count);
}, 100);
}).click(function() {
if (count < 6) {
count = count + 1;
}
}).on('mouseout', function() {
// reset the speed on out
count = 0;
clearInterval(interval);
$(".description-container").scrollTop(0);
});
});
* {
font-family: 'Exo', sans-serif;
}
body {
background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
background-size: cover;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
padding-top: 100px;
}
img {
width: 100%;
height: 400px;
padding: 5px;
}
h2 {
text-align: center;
padding-bottom: 1em;
}
.slick-dots {
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color: black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
:hover {
background-color: black;
}
}
}
/* Custom Arrow */
.prev {
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
.next {
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
#media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
/* the slides */
.slick-slide {
margin: 0 10px;
}
/* the parent */
.slick-list {
margin: 0 -10px;
}
.slide {
position: relative;
}
.tilt-card {
overflow: visible;
transform-style: preserve-3d;
}
.faction-char-img {
width: 85%;
height: auto;
transform: translateZ(30px);
overflow: visible;
}
.faction-char-con {
position: absolute;
bottom: 0px;
}
.faction-logo-con {
position: absolute;
top: 10px;
}
.faction-logo {
width: 70%;
height: auto;
transform: translateZ(20px);
overflow: visible;
float: right;
margin-right: 10px;
}
.nsm-overlay {
position: absolute;
width: 96%;
margin-left: 6px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/xBr7FM1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.foe-overlay {
position: absolute;
width: 98%;
margin-left: 3px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/tyF6AgV.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.faction-more-btn {
position: absolute;
bottom: 20px;
margin-left: 53%;
z-index: 100;
transform: translateZ(50px);
background-color: #212121cc;
border: none;
color: #585858;
padding: 10px 20px 10px;
}
.faction-more-btn:hover {
background-color: #68ddda;
color: #000;
}
.description-overlay {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 0%;
background-color: #0e0e0ef5;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
color: #fff;
padding-left: 25px;
padding-left: 25px;
}
.description-container {
margin-top: 20px;
overflow-y: scroll;
height: 185px;
padding-right: 20px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.description-container::-webkit-scrollbar {
display: none;
}
.desc-hover {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 100%;
background-color: #0e0e0ea6;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.description-overlay h2 {
text-align: left;
font-size: 20px;
margin-top: 30px;
padding-right: 10px;
}
.faction-type {
color: #68ddda;
margin-top: -25px;
}
.faction-details {
font-size: 10px;
}
.foe-tower {
position: absolute;
top: 0px;
height: 100%;
width: auto;
transform: translateZ(20px);
}
.foe-logo {
margin-right: -8px;
margin-top: -9px;
}
.nsm-img {
width: 70%;
}
.nsm-logo {
margin-top: -10px;
width: 65%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div class="tilt-card slide">
<img src="https://i.imgur.com/eHkER1D.jpg">
<div class="nsm-overlay"></div>
<div class="description-overlay">
<h2>NORTH STAR MINING</h2>
<p class="faction-type">MEGACORP</p>
<p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
the reins of the company...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
</div>
</div>
<div class="tilt-card slide">
<img src="https://i.imgur.com/urJ0pyz.png">
<img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
<div class="foe-overlay"></div>
<div class="description-overlay">
<h2>FOLLOWERS OF ETERNITY</h2>
<p class="faction-type">ANARCHO-TERRORISTS</p>
<p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
</div>
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
Live version on codepen

is this what you are looking for:
$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');
instead of
$('.description-overlay').addClass('desc-hover');
https://codepen.io/anon/pen/zJaPbQ
Your problem is that you are adding class to all elements with css class 'description-overlay', you have to add only to the one inside current tilt-card

Working codepen.
That happens because of the hover part bellow, you're using class selector $('.description-overlay') that will select all the elements with this class and add/remove class desc-hover.
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
Should use $(this) to target the related .description-overlay div of every button :
//show details
$(".faction-more-btn").hover(
function() {
$(this).siblings(".description-overlay").addClass('desc-hover');
},
function() {
$(this).siblings(".description-overlay").removeClass('desc-hover');
}
);
NOTE : Both functions you've tried doesn't work since they look inside the current hovered button when the div is a sibling of the button, so you could use siblings() function or the combination of parent()/closest() method and find() like :
$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")

We Keep Coding

JavaScript is the programming language of the Web.

How to scale out.pop up image when i hover? - javascript

Try writing like this .testimonial-section:hover .client-info img { transform: scale3D(1.5,1.5,1.5); } or .testimonial-section .client-info img:hover { transform: scale3D(1.5,1.5,1.5); }

Related

Button disappears after several click

Output Percentage with accordion in each of every multi-step forms once submitted

How can I keep my site/image centered when browser size shrinks?

Do not show the js content while the page is loading

Target This and Class not working as expected

Categories

Resources