Develop Reference

Photo slider glitches in mobile when button is added

I am using a swiper API to make a swipeable gallery. I am trying to add a button on the slider card however to do so I must remove an overlay on the card and when I do so the slider glitches and goes crazy. I'm a beginner in code so I apologize if it's a silly issue but I'd appreciate some assistance.
The way i make the button functional is by removing the content: '' from the .gallery-cards class. However when I remove it the slider glitches in the mobile view. the .gallery-cards is only present in the codes JS to make the card swipe. I have added the CSS, JS, and HTML below. Thanks for any suggestions or help
/*=============== SWIPER JS GALLERY ===============*/
let swiperCards = new Swiper(".gallery-cards", {
loop: true,
loopedSlides: 5,
cssMode: true,
effect: 'fade',
});
let swiperThumbs = new Swiper(".gallery-thumbs", {
loop: true,
loopedSlides: 5,
slidesPerView: 3,
centeredSlides: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
swiperThumbs.controller.control = swiperCards;
.gallery {
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
.gallery__card {
position: relative;
width: 228px;
height: 288px;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.gallery__img,
.gallery__card::after,
.gallery__data {
position: absolute;
}
.gallery__img {
inset: 0;
margin: auto;
transition: transform .3s;
}
.gallery__button {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button:hover {
background-color: #074bb1;
color: white;
transition: .6s;
}
.gallery__button-pink {
padding: 12px 20px;
border-radius: 25px;
margin-left: 60%;
width: 100%;
cursor: pointer;
border: none;
margin-bottom: 20px;
z-index: 15;
}
.gallery__button-pink:hover {
background-color: #ff66c4;
color: white;
transition: .6s;
}
.gallery__card::after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 0%, .3) 100%);
top: 0;
z-index: 1;
}
.gallery__data {
bottom: 1.5rem;
left: 1.75rem;
z-index: 10;
}
.gallery__title,
.gallery__subtitle {
color: #fff;
font-weight: 500;
}
.gallery__title {
font-size: 1rem;
}
.gallery__subtitle {
font-size: .75rem;
}
.gallery__overflow {
position: relative;
}
.gallery__thumbnail {
position: relative;
width: 60px;
height: 60px;
border-radius: 1.5rem;
overflow: hidden;
cursor: pointer;
margin-left: auto;
margin-right: auto;
transition: transform .3s;
}
.gallery__thumbnail-img {
position: absolute;
inset: 0;
margin: auto;
}
/* Swiper class */
.gallery-cards,
.gallery-thumbs {
width: 260px;
}
.gallery-cards:hover .gallery__img {
transform: scale(1.1);
}
.gallery .swiper-wrapper {
padding: 2.5rem 0;
}
.gallery-thumbs {
height: 132px;
}
/* Active thumbnail */
.swiper-slide-active .gallery__thumbnail {
transform: translateY(-1.25rem) scale(1.2);
}
/* Rotate thumbnail */
.swiper-slide-next .gallery__thumbnail {
transform: rotate(15deg);
}
.swiper-slide-prev .gallery__thumbnail {
transform: rotate(-15deg);
}
/* Sliding numbers */
.swiper-pagination-fraction {
font-size: .813rem;
letter-spacing: -1px;
font-weight: 500;
color: hsl(30, 16%, 50%);
bottom: 0;
}
/* Arrow buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
content: '';
}
.swiper-button-next,
.swiper-button-prev {
font-size: 1.5rem;
color: hsl(30, 8%, 15%);
top: 5.5rem;
}
.swiper-button-next {
right: -1.5rem;
transform: rotate(15deg);
}
.swiper-button-prev {
left: -1.5rem;
transform: rotate(-15deg);
}
/* Other swiper settings */
.gallery-cards::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
scroll-snap-type: initial;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
#media screen and (max-width: 320px) {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}
/* For medium devices */
#media screen and (min-width: 1024px) {
.gallery__card {
width: 290px;
height: 370px;
}
.gallery__thumbnail {
width: 65px;
height: 65px;
}
.gallery-cards,
.gallery-thumbs {
width: 290px;
}
}
<div class="swiper-slide">
<article class="gallery__card">
<img src="../assets/img/hfsimageslider.png" alt="image gallery" class="gallery__img">
<div class="gallery__data">
<button class="gallery__button">More Info</button>
</div>
</article>
</div>

When classname on `html` is toggled to a certain value, update (Swiper) JS settings so carousel behaves differently

I'm using document.documentElement.classList.contains to check and apply different settings to Swiper JS depending on the class set on the html. So when retro is added the effect and loop settings are different.
...this works when the class is already on the page when loaded. But I have a toggle that when clicked applies classes to the html and alters the styling.
And adjusting the settings like so:
effect: hasClassRetro ? 'slide' : 'fade',
loop: hasClassRetro ? false : true
Is there away when this happens, the JS checks if the class on html has updated and updates 'live'? Likewise when the class is removed?
/* FADE IN WHEN CONTENT LOADED */
window.addEventListener("DOMContentLoaded", function() {
document.body.className = "visible";
});
/* TOGGLE */
const html = document.querySelector('html');
const button = document.querySelector('.contrast__link');
button.addEventListener('click', e => {
e.preventDefault();
if (html.classList.contains('dark-mode')) {
html.classList.remove('dark-mode');
html.classList.add('retro');
} else if (html.classList.contains('retro')) {
html.classList.remove('retro');
} else {
html.classList.add('dark-mode');
}
});
/* CAROUSEL */
const hasClassRetro = document.documentElement.classList.contains('retro')
var caption = document.querySelector('.swiper-caption span');
const swiper = new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: hasClassRetro ? 'slide' : 'fade',
fadeEffect: {
crossFade: true
},
loop: hasClassRetro ? false : true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 640); // 1000 means 1s, it's in ms here.
});
/* #GLOBAL */
body.hidden {
opacity: 0;
}
body.visible {
opacity: 1;
transition: opacity 0.48s ease-out;
}
html {
background: white;
font-size: 62.5%;
height: 100vh;
height: var(--app-height);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
.dark-mode {
background: yellow;
}
.retro {
background: blue;
color: white;
}
/**
* Base `body` styling.
*/
body {
background-color: transparent;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-size: 16px;
height: 100vh;
height: var(--app-height);
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
}
h1,
p {
margin: 0 0 24px;
padding: 0;
}
/* #HEAD (left column) */
.page-head {
border-bottom: 2px solid black;
box-sizing: border-box;
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
}
.site-logo {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
order: 1;
stroke: black;
transform: rotate(90deg);
width: 32px;
svg {
overflow: visible;
}
}
.contrast {
display: flex;
align-items: center;
flex: 1 1 0%;
margin-bottom: 0;
justify-content: flex-start;
}
/* #GRID */
.grid {
display: flex;
flex-direction: column;
height: 100vh;
}
.grid__item {
box-sizing: border-box;
padding: 24px 24px 0;
margin-left: 64px;
}
.gallery {
box-sizing: border-box;
flex: 1;
overflow: hidden;
position: relative;
padding: 0 24px 24px;
text-align: center;
}
.gallery img {
border: 2px solid black;
box-sizing: border-box;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
max-width: 100%;
}
/**
* Side-by-side view for wider devices.
*/
.grid {
display: flex;
flex-direction: column;
height: 100vh;
height: var(--app-height);
}
/**
* Grid Cells.
*/
.grid__item {
box-sizing: border-box;
padding: 48px 48px 0;
margin-left: 48px;
#media only screen and (min-width: 1000px) {
margin-left: 0;
}
}
.gallery {
box-sizing: border-box;
flex: 1;
overflow: hidden;
position: relative;
padding: 0 24px 24px;
text-align: center;
}
.gallery img {
border: 2px solid black;
box-sizing: border-box;
height: 100%;
max-height: 100%;
object-fit: cover;
object-position: top center;
width: 100%;
max-width: 100%;
#media only screen and (min-width: 1000px) {
width: auto;
}
}
/**
* Side-by-side view for wider devices.
*/
#media only screen and (min-width: 1000px) {
.grid {
background-color: black;
flex-direction: row;
column-gap: 2px;
height: 100vh;
margin: 0 48px;
}
.grid__item {
background-color: white;
transition: width 0.12s;
width: 33.333333%;
height: 100vh;
}
.gallery {
padding-top: 24px;
}
.gallery img {
height: 100%; // Was Auto to keep aspect-ratio
max-height: 100%;
//object-fit: initial;
width: auto;
max-width: 100%;
}
}
#media only screen and (min-width: 1000px) {
.grid__item {
width: 50%;
}
}
#media screen and (max-height: 600px) {
.grid {
height: auto;
}
.grid__item {
height: auto;
}
}
/* #FOOTER (right column) */
.page-foot {
margin-left: 64px;
padding: 0 24px;
}
.swiper-pagination {
display: none;
}
#media only screen and (min-width: 1000px) {
.page-foot {
border-bottom: 2px solid black;
box-sizing: border-box;
display: flex;
height: 64px;
padding: 0 24px;
position: fixed;
bottom: -64px;
left: 0;
transform: rotate(-90deg);
transform-origin: top left;
width: 100vh;
left: auto;
right: 0;
transform: rotate(90deg);
transform-origin: top right;
p {
display: flex;
align-items: center;
margin-bottom: 0;
}
}
.swiper-caption {
flex: 1 1 0%;
}
}
/* CURSOR */
* {
//cursor: none !important;
}
body:hover {
.cursor-trail {
border-color: black;
}
.cursor span {
background-color: black;
}
}
.cursor {
position: fixed;
z-index: 1000;
}
.cursor span {
background-color: transparent;
border-radius: 100%;
display: block;
height: 4px;
margin: 0;
pointer-events: none;
transition: background-color 0.12s ease-out, height 0.12s, opacity 0.12s, width 0.12s;
position: fixed;
width: 4px;
}
.cursor--click span {
height: 0;
margin: 2px 0 0 2px;
width: 0;
}
.cursor-trail {
border: 2px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 32px;
margin: 0;
pointer-events: none;
position: fixed;
transform-origin: center center;
transition: border-color 0.12s ease-out, height 0.12s ease-out, margin 0.12s ease-out, opacity 0.12s ease-out, transform 0.24s cubic-bezier(0, 0.5, 1, 1), width 0.12s ease-out;
width: 32px;
z-index: 1000;
}
.cursor-trail--hover {
height: 4px;
margin: 16px 0 0 16px;
opacity: 0;
width: 4px;
}
/* Prev */
.cursor-prev span,
.cursor-next span {
border-radius: 0;
height: 2px;
transition: height 0.12s, opacity 0.12s, transform 0.12s, width 0.12s;
transform-origin: center center;
left: -16px;
width: 32px;
&:before,
&:after {
background: black;
content: "";
display: block;
height: 2px;
opacity: 0;
width: 16px;
position: absolute;
transform-origin: center left;
}
&:before {
animation: cursor-prev 0.12s ease-in-out 0.32s forwards;
}
&:after {
animation: cursor-next 0.12s ease-in-out 0.32s forwards;
}
}
.cursor-next span {
transform: rotate(-180deg);
}
#keyframes cursor-prev {
0% {
transform: rotate(0);
}
100% {
opacity: 1;
transform: rotate(-45deg);
}
}
#keyframes cursor-next {
0% {
transform: rotate(0);
}
100% {
opacity: 1;
transform: rotate(45deg);
}
}
/* SWIPER */
.swiper {
height: 100%; // Fits image in viewport
position: relative;
//overflow: hidden; // Removed which seems to help border getting cut off
touch-action: pan-y;
z-index: 1; // Fix of Webkit flickering
-webkit-user-select: none; // Fixes issue in Safari when clicking carousel quickly, page is highlighted black.
}
.swiper-wrapper {
box-sizing: border-box;
display: flex;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.swiper-slide {
backface-visibility: hidden;
flex-shrink: 0;
height: 100%;
max-height: 100%; // Added myself
pointer-events: none;
position: relative;
transform: translateZ(0);
transition: opacity 12ms ease-out !important;
width: 100%;
}
.swiper-slide-active {
pointer-events: auto;
}
.swiper-button-prev,
.swiper-button-next {
background: none;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: absolute;
top: 0;
width: 50%;
z-index: 10;
&:focus {
outline: 0;
}
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-pagination-current {
margin-right: 4px;
}
.swiper-pagination-total {
margin-left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js"></script>
<script>
document.body.className = 'hidden';
</script>
<div class="cursor"><span></span></div>
<div class="cursor-trail"></div>
<div class="page-head" role="banner">
<div class="site-logo">
M
</div>
<p class="contrast"><span class="contrast__switch"></span><span class="contrast__label">Contrast</span></p>
</div>
<div class="grid" role="main">
<div class="grid__item finder">
<div class="hgroup title-bar">
<h1 class="brand-name">Name of Page</h1>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="grid__item gallery">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-caption="1 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1000" />
</div>
<div class="swiper-slide" data-caption="2 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1100" />
</div>
<div class="swiper-slide" data-caption="3 Caption that is really, really, really, really long">
<img src="https://www.fillmurray.com/700/1200" />
</div>
</div>
<a class="swiper-button-prev" data-interaction="cursor-prev"></a>
<a class="swiper-button-next" data-interaction="cursor-next"></a>
</div>
</div>
<div class="page-foot" role="contentinfo">
<p class="swiper-caption">Caption that is really, really, really, really long...</p>
<p class="swiper-pagination"></p>
</div>
</div>
const hasClassRetro = document.documentElement.classList.contains('retro')
var caption = document.querySelector('.swiper-caption span');
const swiper = new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: hasClassRetro ? 'slide' : 'fade',
fadeEffect: {
crossFade: true
},
loop: hasClassRetro ? false : true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 640); // 1000 means 1s, it's in ms here.
});

Hamburger button is not on the right place

I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>

First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>

Automatic resize photo issue

I've found this amazing plugin called Flickity, passing through the styling options I've managed to create synced carousel with images.
The issue I can't resolve is how to make images to resize according to device width. I am implementing it to work with kind of horizontal scrolling page. How should I go about this?
Codepen link
HTML
<div class="gallery gallery-nav js-flickity gallerysub"
data-flickity-options='{ "asNavFor": ".gallery-main", "contain": true, "pageDots": false, "imagesLoaded": true, "percentPosition": false, "prevNextButtons": false, "cellAlign": "left"}'>
<div class="nav" > <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/z8n28b08z/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/52ontitc3/image.jpg"></div>
</div>
<div class="gallery gallery-main js-flickity gallerymain" data-flickity-options='{"freeScroll": true, "wrapAround": true, "prevNextButtons": false, "pageDots": false, "imagesLoaded": true, "percentPosition": false}'>
<div class="for" > <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/z8n28b08z/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/52ontitc3/image.jpg"></div>
</div>
CSS
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
/* vertically center */
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
filter: alpha(opacity=60); /* IE8 */
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
filter: alpha(opacity=30); /* IE8 */
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
color: #333;
font-size: 26px;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
filter: alpha(opacity=25); /* IE8 */
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
filter: alpha(opacity=100); /* IE8 */
opacity: 1;
}
/* external css: flickity.css */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.gallery-main img {
display: block;
height: 600px;
}
.gallery-nav img {
display: block;
height: 93px;
}
div.for {
margin-right: 30px;
}
.gallerymain {
margin-top: 30px;
}
.gallerysub {
margin-top: 30px;
}

jQuery disable hover effect onClick

http://codepen.io/jzhang172/pen/YXoWZa
$(function(){
$('.tint.first').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.one').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
#media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
#media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
#media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
#media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.tint.first:hover img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>
For clarity, please open my codepen and follow these instructions:
1.) Hover over the picture and observe the translate hover effect and the tint on the picture vanishing. (Working as intended)
2.) Click the picture and do not move the mouse after clicking it, observe how the picture grows into the frame
3.) Re-click the picture or simply refresh the page to go back to its normal size and now click the picture and take your mouse immediately off the picture to anywhere other then the picture.
4.) Observe how the picture automatically transitions into the position without the growing.
Question:
From what I can tell, this is because the ".tint.first:hover img" is still in effect and I'm guessing that if I could disable that when I click on the picture, it would be fine. How would I do this?
Also, if anyone could tell me how I could make the picture responsive, that'd be great. I'm concerned how position:relative, top, left etc. would look like on other windows.

I would recommend that you add the CSS in .tint.first:hover img to a class and add/remove the class according to your needs.
on hover you add it, on click you check if it is set on the element and remove it.
on mouseout you set it again on the element (for next time you wish it to grow).
Hope I was clear.
Regards,
Saar

http://codepen.io/jzhang172/pen/YXoWZa
Working answer. When mouse enters region, add css property, when mouse leaves region, remove that css property.
$(function(){
$('.tint.first').mouseenter(function() {
$(this).addClass("me img");
});
$('.tint.first').mouseleave(function() {
$(this).removeClass("me img");
});
$('.tint.first').on('click', function() {
$(this).removeClass("me img");
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
#media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
#media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
#media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
#media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.me img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>