I have my before img slider. I tried to paste in code, but then my page going to mad although the slider works.
Original
My Slider
https://www.w3schools.com/code/tryit.asp?filename=GIJD6V38V0QR
<!DOCTYPE html>
<style>
body {
margin: 0;
}
.container {
height: 73.5vw;
margin: 1vw auto;
max-height: 750px;
max-width: 1000px;
overflow: hidden;
width: 98vw;
}
.container figure {
background-image: url(https://webdevtrick.com/wp-content/uploads/1st.jpg);
background-size: cover;
font-size: 0;
height: 100%;
margin: 0;
position: relative;
width: 100%;
}
#compare {
background-image: url(https://webdevtrick.com/wp-content/uploads/2nd.jpg);
background-size: cover;
bottom: 0;
border-right: 5px solid rgba(255, 255, 255, 0.7);
box-shadow: 10px 0 15px -13px #000;
height: 100%;
max-width: 98.6%;
min-width: 0.6%;
overflow: visible;
position: absolute;
width: 50%;
animation: first 2s 1 normal ease-in-out 0.1s;
-webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#slider {
-moz-appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
cursor: col-resize;
height: 100vw;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: relative;
top: -100vw;
width: 100%;
}
input#slider::-moz-range-track {
background: transparent;
}
input#slider::-ms-track {
border: none;
background-color: transparent;
height: 100vw;
left: 0;
outline: none;
position: relative;
top: -100vw;
width: 100%;
margin: 0;
padding: 0;
cursor: col-resize;
color: transparent;
}
input#slider::-ms-fill-lower {
background-color: transparent;
}
input#slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#slider::-moz-range-thumb {
-moz-appearance: none;
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#slider::-ms-thumb {
height: 100vw;
width: 0.5%;
opacity: 0;
}
input#slider::-ms-tooltip {
display: none;
}
#compare::before {
background: url(https://webdevtrick.com/wp-content/uploads/comparision.png) no-repeat scroll 0 center transparent;
background-size: contain;
content: " ";
float: right;
height: 100%;
margin-right: -34px;
position: relative;
top: 0;
width: 64px;
}
#keyframes first {
0% {
width: 0%;
}
50% {
width: 80%;
}
100% {
width: 50%;
}
}
#-webkit-keyframes first {
0% {
width: 0%;
}
50% {
width: 80%;
}
100% {
width: 50%;
}
}
</style>
<script>
function beforeAfter() {
document.getElementById('compare').style.width = document.getElementById('slider').value + "%";
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<figure>
<div id="compare"></div>
</figure>
<input oninput="beforeAfter()" onchange="beforeAfter()" type="range" min="0" max="100" value="50" id="slider" />
</div>
<script src="function.js"></script>
</body>
</html>
I can't find the problem with style. Any help will be appreciated.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I'm having trouble centering this div class in the middle.
It keeps staying centered at the top, and not the middle.
I can't figure out how to position it in the middle.
How it works is, you click on the play image and it opens up.
The rectangle of the same width and height, should be in the middle.
https://jsfiddle.net/v3rn4tf0/
.wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
box-sizing: border-box;
}
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelectorAll('.jacketa');
cover.forEach(function(el) {
el.addEventListener('click', coverClickHandler)
});
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
top: 40px;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
display: block !important;
}
.j1 .jacketa {
left: 30px;
}
.j2 .jacketa {
right: 30px;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 240px;
height: 260px;
margin: auto;
border-radius: 50%;
transition: 10s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.curtain.slide .j1 {
left: -500%;
}
.curtain.slide .j2 {
left: 500%;
}
.video-wrapper {
min-width: 40%;
max-width: 640px;
margin: auto;
}
.ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
box-sizing: border-box;
}
.hide {
display: none;
}
<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide ">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
</div>
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
You can try this method:
html,
body {
height: 100%;
}
.centered-item {
/* Positioning */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
/* Styling */
padding: 20px;
font-family: "Open Sans", Arial, sans-serif;
color: #FFFFFF;
background: #1f2227;
border-radius: 3px;
}
Demo:
https://jsfiddle.net/caneroncel/f5nuqkmv/1/
I can't get the rollover image (e.g. .rolled-thumb-1) to stay displayed after rolling off the image thumbs. It should work using the transition delay property exactly like in this demo, but doesn't. Rolling over the thumbs creates an absolutely positioned div rather than replace the initial large image's background image.
The selector that should do it is:
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); - transparent img */
}
And hovering over, for example, the first thumb:
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
I noticed many other similar posts mention reordering the transition and transition-delay rules, which I've done but to no avail. If I uncomment the transparent as above, only 1 of the images work, but then doesn't change back and only 1 works. I think it's something to do with having nothing to transition in the first place, as it somewhat transitioned when the BG image was there, though not properly.
Does anyone have any ideas? An explanation of what I'm doing wrong would be very helpful. Thanks for any help
/* images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* images */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */overflow: hidden;
position:relative;
}
#hook-container {
background: blue;
float: left;
width: 33%;
height: auto;
padding: 3% 0 0 3%;
position: absolute;
height: 100%;
right: 0;
top: 0;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#images-wrap {
width: 67%;
height: auto;
float: left;
position: relative;
}
#main-image {
width: 79%;
float: left;/*
background-size: cover !important;
background-position: center center !important;*/
height: auto;
width: 100%;
padding-bottom: 52.666%;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
position: relative;
}
#image-thumbs {
width: 19%;
float: left;
margin-left: 2%;
position: absolute;
right: 0;
height: 100%;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
margin-bottom: 4%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }
#media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#hook-container {
width: 100%;
padding: 3% 0;
position: static;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 1 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: absolute;
bottom: 0;
overflow-x: visible !important;
overflow-y: visible !important;
}
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 100%;
height: 79%;
z-index: 99;
}
}
#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
position: absolute;
background: pink;
width: 411%;
height: 400%;
top: -406%;
z-index: 9;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 { background-color: transparent }
.rolled {
transition: background-image .1s 604800s;
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-2:hover .rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-3:hover .rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#thumb-4:hover .rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
transition: background-image 0s;
transition-delay: 0s;
}
#media (min-width: 768px) {
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
width: 414.5%;
height: 416%;
top: 0;
left: -425%;
}
.rolled-thumb-2 { top: -106% }
.rolled-thumb-3 { top: -212% }
.rolled-thumb-4 { top: -318% }
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 79%;
height: 100%;
z-index: 99;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"><div id='main-image-area'></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
<div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
<div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
<div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
</div>
</div>
</div>
</div>
<div id='hook-container'>
<span>Summary</span>
<ul>
<li>key selling point</li>
<li>key selling point</li>
<li>key selling point</li>
</ul>
</div>
</div>
UPDATE
This is similar to one of my other posts, but different as the solution to the other post does not apply to this post. Not trying to spam and genuinely don't know how to solve this.
/* images */
#main-image { background-image: url('https://cml.sad.ukrd.com/image/661835.jpg') }
#thumb-1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb-2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb-3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb-4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
/* images */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */overflow: hidden;
position:relative;
}
#hook-container {
background: blue;
float: left;
width: 33%;
height: auto;
padding: 3% 0 0 3%;
position: absolute;
height: 100%;
right: 0;
top: 0;
}
#hook-container > span {
font-weight: bold;
font-size: 1.5em;
}
#hook-container > ul {
list-style-type: none;
font-size: 1em;
}
#hook-container ul li:before {
content: '✓ ';
color: green;
}
#images-wrap {
width: 67%;
height: auto;
float: left;
position: relative;
}
#main-image {
width: 79%;
float: left;/*
background-size: cover !important;
background-position: center center !important;*/
height: auto;
width: 100%;
padding-bottom: 52.666%;
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
position: relative;
}
#image-thumbs {
width: 19%;
float: left;
margin-left: 2%;
position: absolute;
right: 0;
height: 100%;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
margin-bottom: 4%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
.image-thumb:hover { cursor: pointer }
#media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#hook-container {
width: 100%;
padding: 3% 0;
position: static;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
padding-bottom: 84.333%; /* 125*2/3 (+1 for margin bottom) */
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: visible !important;
overflow-y: visible !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 1 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: absolute;
bottom: 0;
overflow-x: visible !important;
overflow-y: visible !important;
}
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 100%;
height: 79%;
z-index: 99;
}
}
#thumb-1, #thumb-2, #thumb-3, #thumb-4 {position:relative}
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
position: absolute;
background: pink;
width: 411%;
height: 400%;
top: -406%;
z-index: 9;
opacity: 0;
transition: opacity 1s 3s ease;
background-color: transparent;
}
.rolled-thumb-2 {left:-104%}
.rolled-thumb-3 {left:-208%}
.rolled-thumb-4 {left:-312%}
.rolled {
background-size: cover;
/* background-image: url('https://cml.sad.ukrd.com/tp/3x2/'); */
}
#thumb-1:hover .rolled-thumb-1 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-2:hover .rolled-thumb-2 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-3:hover .rolled-thumb-3 {
opacity: 1;
transition: opacity 1s 0s ease;
}
#thumb-4:hover .rolled-thumb-4 {
opacity: 1;
transition: opacity 1s 0s ease;
}
.rolled-thumb-1 {
background-image: url('https://cml.sad.ukrd.com/image/394545.jpg');
}
.rolled-thumb-2 {
background-image: url('https://cml.sad.ukrd.com/image/572806.jpg');
}
.rolled-thumb-3 {
background-image: url('https://cml.sad.ukrd.com/image/486757.jpg');
}
.rolled-thumb-4 {
background-image: url('https://cml.sad.ukrd.com/image/612357.jpg');
}
#media (min-width: 768px) {
.rolled-thumb-1, .rolled-thumb-2, .rolled-thumb-3, .rolled-thumb-4 {
width: 414.5%;
height: 416%;
top: 0;
left: -425%;
}
.rolled-thumb-2 { top: -106% }
.rolled-thumb-3 { top: -212% }
.rolled-thumb-4 { top: -318% }
#main-image-area {
position: absolute;
left: 0;
top: 0;
background: transparent;
width: 79%;
height: 100%;
z-index: 99;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"><div id='main-image-area'></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb-1"><div class='rolled rolled-thumb-1'></div></div>
<div class="image-thumb" id="thumb-2"><div class='rolled rolled-thumb-2'></div></div>
<div class="image-thumb" id="thumb-3"><div class='rolled rolled-thumb-3'></div></div>
<div class="image-thumb" id="thumb-4"><div class='rolled rolled-thumb-4'></div></div>
</div>
</div>
</div>
</div>
<div id='hook-container'>
<span>Summary</span>
<ul>
<li>key selling point</li>
<li>key selling point</li>
<li>key selling point</li>
</ul>
</div>
</div>
I've made a simple css key frame animation that occurs when the page is loaded. However, the page background-image sticks to the text. You can see my problem here
https://codepen.io/gavdraws/pen/OmpEjK
Any ideas what I'm doing wrong?
Cheers
You have applied a background-image to .home and the text elements have class .home, so each of them has a background-image.
I think you want that background on the element that wraps the text elements (.pageCont) - not every .home element.
/* - - - - - Nav Icons - - - - - */
/* Profile */
$(document).ready(function(){
$("#top").hover(function() {
$("#profile").css("background-image", "url(img/nav-icons/Profile-light.png)");
}, function() {
$("#profile").css("background-image", "url(img/nav-icons/Profile-dark.png)");
});
});
/* CV */
$(document).ready(function(){
$("#left").hover(function() {
$("#cv").css("background-image", "url(img/nav-icons/CV-light.png)");
}, function() {
$("#cv").css("background-image", "url(img/nav-icons/CV-dark.png)");
});
});
/* Contact */
$(document).ready(function(){
$("#bottom").hover(function() {
$("#contact").css("background-image", "url(img/nav-icons/Contact-light.png)");
}, function() {
$("#contact").css("background-image", "url(img/nav-icons/Contact-dark.png)");
});
});
/* Work */
$(document).ready(function(){
$("#right").hover(function() {
$("#work").css("background-image", "url(img/nav-icons/Work-light.png)");
}, function() {
$("#work").css("background-image", "url(img/nav-icons/Work-dark.png)");
});
});
html, body {
height:100%;
width: 100%;
margin:0;
padding:0;
}
h2{
font-family: 'Lato', sans-serif;
font-size: 33pt;
font-style: bold;
text-transform: uppercase;
}
h2.home{
color: #EDEDED;
}
p{
font-family: 'Lato', sans-serif;
font-size: 12pt;
}
p.home{
color: #EDEDED;
}
/*.preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
z-index: 2000;
background-image: url(../gfx/logo/logo.gif) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}*/
/*#line{
position: relative;
top: 50%;
bottom: 50%;
}*/
.frame {
position: absolute;
z-index: 1000;
}
.frame.rightFrame {
top: 0px;
right: 0px;
border-right: 45px solid #EDEDED;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
height: 100%;
box-sizing: border-box;
}
.frame.rightFrame:hover{
border-right: 45px solid #F1612F;
cursor: pointer;
}
.frame.leftFrame {
top: 0px;
left: 0px;
border-left: 45px solid #EDEDED;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
height: 100%;
box-sizing: border-box;
}
.frame.leftFrame:hover{
border-left: 45px solid #F1612F;
cursor: pointer;
}
.frame.topFrame {
top: 0px;
left: 0px;
border-top: 45px solid #EDEDED;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
height: 0px;
width: 100%;
box-sizing: border-box;
}
.frame.topFrame:hover{
border-top: 45px solid #F1612F;
cursor: pointer;
}
.frame.bottomFrame {
bottom: 0px;
left: 0px;
border-bottom: 45px solid #EDEDED;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
height: 0px;
width: 100%;
box-sizing: border-box;
}
.frame.bottomFrame:hover{
border-bottom: 45px solid #F1612F;
cursor: pointer;
}
.pageCont{
position: absolute;
top: 45px;
left: 45px;
right: 45px;
bottom: 45px;
z-index: 950;
overflow: hidden;
}
/* - - - - - Icons formatting - - - - - */
.menuIcon {
z-index: 1001;
cursor: pointer;
}
/* Profile */
.menuIcon#profile {
position: relative;
margin: 0 auto;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/Profile-dark.png);
background-repeat: no-repeat;
}
#profile:hover ~ .topFrame {
border-top: 45px solid #F1612F !important;
}
#profile:hover {
background-image: url(../img/nav-icons/Profile-light.png) !important;
}
/* CV */
.menuIcon#cv {
top: 50%;
margin-top: -15px;
position: absolute;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/CV-dark.png);
background-repeat: no-repeat;
}
#cv:hover ~ .leftFrame {
border-left: 45px solid #F1612F !important;
}
#cv:hover {
background-image: url(../img/nav-icons/CV-light.png) !important;
}
/* Contact */
.menuIcon#contact {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0 !important;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/Contact-dark.png);
background-repeat: no-repeat;
}
#contact:hover ~ .bottomFrame {
border-bottom: 45px solid #F1612F !important;
}
#contact:hover {
background-image: url(../img/nav-icons/Contact-light.png) !important;
}
/* Work */
.menuIcon#work {
top: 50%;
right: 0;
margin-top: -15px;
position: absolute;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/Work-dark.png);
background-repeat: no-repeat;
}
#work:hover ~ .rightFrame {
border-right: 45px solid #F1612F !important;
}
#work:hover{
background-image: url(../img/nav-icons/Work-light.png) !important;
}
.pageCont{
background-image: url("http://www.codeandpepper.com/assets/gfx/start/slide_3.jpg") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
.profile-pic{
position: relative;
margin-top: 30px !important;
width: 150px;
height: auto;
text-align: center;
animation: fadeuptwo 0.8s ease-out forwards;
/* Safari and Chrome */
-webkit-animation: fadeuptwo 0.8s;
}
.centre-div{
text-align: center;
position: relative;
margin: 0 auto !important;
margin-top: 50px !important;
width: 420px;
height: 80%;
animation: fadeup 0.9s ease-out forwards;
/* Safari and Chrome */
-webkit-animation: fadeup 0.9s;
}
#keyframes fadeup {
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1
}
}
#-webkit-keyframes fadeup {
/* Safari and Chrome */
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
#keyframes fadeuptwo {
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1
}
}
#-webkit-keyframes fadeuptwo {
/* Safari and Chrome */
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
a {
color: #F1612F;
display: inline-block;
position: relative;
text-decoration: none;
cursor: pointer;
}
a:after {
background-color: currentColor;
bottom: 0;
content: '';
display: inline-block;
height: 2.5px;
left: 0;
position: absolute;
right: 0;
-moz-transition: left 0.15s ease-out,right 0.15s ease-out;
-o-transition: left 0.15s ease-out,right 0.15s ease-out;
-webkit-transition: left 0.15s ease-out,right 0.15s ease-out;
transition: left 0.15s ease-out,right 0.15s ease-out;
}
a:hover:after {
left: 50%;
right: 50%;
-moz-transition: left 0.15s ease-in,right 0.15s ease-in;
-o-transition: left 0.15s ease-in,right 0.15s ease-in;
-webkit-transition: left 0.15s ease-in,right 0.15s ease-in;
transition: left 0.15s ease-in,right 0.15s ease-in;
}
/* Responsive: Small Desktop */
#media (max-width: 640px) {
}
/* Responsive: Mobile */
#media (max-width: 640px) {
.frame{
display: none !important;
}
.pageCont{
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.menuIcon{
display: none !important;
}
.centre-div{
width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!--<div class="preloader"></div>-->
<div class="menuIcon" id="profile"></div>
<div class="menuIcon" id="cv"></div>
<div class="menuIcon" id="work"></div>
<div class="menuIcon" id="contact"></div>
<div class="frame rightFrame" id="right"></div>
<div class="frame leftFrame" id="left"></div>
<div class="frame topFrame" id="top"></div>
<div class="frame bottomFrame" id="bottom"></div>
<div class="pageCont home">
<div class="centre-div">
<img class="profile-pic" src="img/me_1#2x.png">
<h2 class="home">Hi, I'm Gavin.</h2>
<p class="home">
A graphic and UX designer with excellent communication and design skills with a proven record of delivering creative and innovative design solutions. Welcome to my online Portfolio.
</p>
<p class="home">
I have passion for both digital and print design, with a forward-thinking mentality and innovative spark. Please feel free to have a <a>look around</a> and <a>say hello</a>.
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/gavinfriel.js" type="text/javascript"></script>
</body>
I have this html file:
<div style="
width:400px;
height:300px;
background-color:#009966;">
</div>
I'm opening it as a modal window with colorbox, that has this CSS:
#cboxOverlay, #cboxWrapper, #colorbox {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxWrapper {
max-width: none;
}
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%}
#cboxBottomLeft, #cboxMiddleLeft {
clear: left;
}
#cboxContent {
position: relative;
}
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle {
margin: 0;
}
#cboxLoadingGraphic, #cboxLoadingOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%}
#cboxClose, #cboxNext, #cboxPrevious, #cboxSlideshow {
cursor: pointer;
}
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#cboxContent, #cboxLoadedContent, #colorbox {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 32px;
overflow: visible;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
padding: 1px;
}
#cboxLoadingGraphic {
background: url(../images/loading.gif) no-repeat center center;
}
#cboxLoadingOverlay {
background: #000;
}
#cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000;
}
#cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px;
}
#cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -30px;
left:390px;
background: url(../images/controls.png) no-repeat;
}
#cboxClose:active, #cboxNext:active, #cboxPrevious:active, #cboxSlideshow:active {
outline: 0;
}
#cboxPrevious {
background-position: 0 0;
right: 44px;
}
#cboxPrevious:hover {
background-position: 0 -25px;
}
#cboxNext {
background-position: -25px 0;
right: 22px;
}
#cboxNext:hover {
background-position: -25px -25px;
}
#cboxClose {
background-position: -50px 0;
right: 0;
}
#cboxClose:hover {
background-position: -50px -25px;
}
.cboxSlideshow_off #cboxPrevious, .cboxSlideshow_on #cboxPrevious {
right: 66px;
}
.cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px;
}
.cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px;
}
.cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0;
right: 44px;
}
.cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px;
}
I've tried playing with the position of the "X" button, I want it to be outside of the DIV, say 50px to the top and 50px to the right, by modifying #cboxClose, but that image gets cutted off, as you can see in the photo.
what's causing this?
The container #cboxWrapper has overflow: hidden; set (near the top of your included CSS); if you add overflow: visible; to that selector, your moved X button should be visible.
I wouldn't recommend changing the original overflow: hidden; declaration, since it involves other selectors, but just adding the the following:
#cboxWrapper {
overflow: visible;
}
I'm trying to make the image on the left of the following page resize like the images on the right when the browser window is made smaller/bigger:
http://www.hugoproject.com/test.html
I am using a sprite for the image on the left. My code is as follows:
HTML
<div id="home-projects">
<div id="projects">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
CSS
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects {
width: 100%;
}
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link, .circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover {
opacity: .9;
}
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 283px;
height: 213px;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
}
.HS span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
background-position: 0 -214px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.HS:hover span {
opacity: 1;
}
What am I doing wrong?
This resizes it like you want (in Firefox at least, haven't tested elsewhere). Mainly have to use %'s, not fixed size in order to scale.
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 100%;
height: 75%;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px 0px;
background-size: 800%;
}
.HS span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px -100%;
opacity: 0;
width: 100%;
height: 100%;
background-size: 800%;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height:100%;
}
Another, possibly better, option would be to actually crop your PNG into separate images rather than selecting the position so that you can use the same CSS as with your other images.