I am newbie to this and can't find many specific answers. I am looking for a way to change text labels into images when the viewport is scaled down to mobile sizes. I have additional issues because I am doing so with Leaflet, a java script library for Open Street Maps. They organize things a little different and I have to inject my styling.
Here is my live page with icons: https://leksplay.com/playgroundmap (still working on my SSL cert).
My full inline styles are at the bottom. I have a couple of things going on here.
I am styling the input directly because Leaflet inserts a div between label and input not allowing me to trigger animation on the label based on "checked" input states.
I am injecting a class into my labels through javascript. Leaflet allows this, example:
var overlayMaps = {
"All Playgrounds": dummy[0],
"<img class='icons' src='https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png' alt='Restrooms'>": dummy[1],
"<img class='icons' src='https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png' alt='Public grills'>": dummy[2],
"<img class='icons' src='https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png' alt='Accessible equipment'>": dummy[3],
"<img class='icons' src='https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png' alt='Indoor area'>": dummy[4],
"<img class='icons' src='https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png' alt='Fully fenced'>": dummy[5],
"<img class='icons' src='https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png' alt='Partially fenced'>": dummy[6],
"<img class='icons' src='https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png' alt='Animals'>": dummy[7],
"<img class='icons' src='https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png' alt='Pool or beach'>": dummy[8],
"<img class='icons' src='https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png' alt='Toddler Area'>": dummy[9]
};
I am also having some issues with my flex container on smaller screens because of margins I can't manage to fix. On mobile there is too much space on the left and right side causing the container to only have two columns when clearly there is space for 3 or 4. Example:
photo of current mobile view
I am sure there is a way, maybe with jQuery (which I dont know), to either fix the flex container on mobile or simply transition from text only on desktop to icons when on a smaller screen. Here is a live example of the text only version: https://leksplay.com/test-and
My end goal is to find a way that can display my control box (filters) on mobile without the browser creating an overflow scroll box or making the user scroll needlessly far to get to the actual map.
Any help is appreciated.
<div class="flexcontainer">
<div id="new-parent">
</div>
</div>
<script>// Create the control and add it to the map;
var control = L.control.layers(null, overlayMaps,{collapsed:false});
control.addTo(map);
// Call the getContainer routine.
var htmlObject = control.getContainer();
// Get the desired parent node.
var a = document.getElementById('new-parent');
// Finally append that node to the new parent.
function setParent(el, newParent)
{
newParent.appendChild(el);
}
setParent(htmlObject, a);
</script>
<style>
*, *::before, *::after {
box-sizing: border-box;
vertical-align: middle;
}
body {
color: #435757;
background: radial-gradient(#fff, #dac4cd);
font: min(3vw, 16px) 'Montserrat';
justify-content: center;
align-items: center;
flex-direction: column;
}
label:first-of-type {
border: 3px solid #689c93;
margin: min(1vw,10px) 75%;
flex: 0 0 30%;
border-radius: 100px;
}
label {
display: block;
position: relative;
padding: min(.5vw, 5px) min(3vw, 15px) min(.5vw, 5px) min(.5vw, 5px);
color: #000;
background-color: transparent;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color .2s, box-shadow .2s;
flex: 0 0 20%;
border-radius: 100px;
}
.flexcontainer {
display: flex !important;
flex-wrap: wrap;
}
.icons {
width: 70px;
}
#new-parent {
position: relative;
}
</style>
<style>
.leaflet-control-layers-selector {
--primary: #679C92;
--secondary: #E0E0E0;
--duration: 0.5s;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
outline: none;
cursor: pointer;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
perspective: 240px;
border-radius: 50%;
width: min(3.5vw, 25px);
height: min(3.5vw, 25px);
background-size: 300% 300%;
transition: transform 0.3s;
transform: translate(0vw, 0vw);
transform-origin: center center;
animation: var(--name, unchecked) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before, .leaflet-control-layers-selector:after {
content: '';
position: absolute;
height: var(--height, 13px);
left: 3px;
top: var(--top, 3px);
background: var(--background, var(--primary));
animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before {
clip-path: polygon(0 0%);
}
.leaflet-control-layers-selector:active {
--scale: 0.95;
}
.leaflet-control-layers-selector:checked {
--name: checked;
--name-icon-b: checked-icon;
--name-icon-a: unchecked-icon;
}
#keyframes checked-icon {
from {
transform: translateZ(12px);
}
to {
transform: translateX(16px) rotateY(90deg) translateZ(12px);
}
}
#keyframes unchecked-icon {
from {
transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
}
to {
transform: translateZ(12px);
}
}
#keyframes checked {
from {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
background-position: 50% 50%;
}
}
#keyframes unchecked {
from {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 100% 50%;
}
to {
background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
background-position: 50% 50%;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
</style>
<style>
.leaflet-control-layers-expanded {
padding: 0px 0px 0px 0px !important;
background: transparent !important;
}
.leaflet-control-layers {
box-shadow: 0 0px 0px rgba(0,0,0,00) !important;
background: transparent !important;
border-radius: 0px !important;
}
.leaflet-control-layers-overlays {
display: flex !important;
position:unset;
justify-content: center;
flex-wrap: wrap;
flex-basis: unset;
align-items: center;
width: 75%;
margin: 0px 12.5% 0px 12.5%;
align: center;
}
</style>
Here is the solution:
Step 1: hide the text when the browser size is less than 991px or in mobile screens which have size less than 991px;
Step 2: set a background image.
#media all and (max-width:991px){
#tst1{
background-image:url('https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst2{
background-image:url('https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst3{
background-image:url('https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst4{
background-image:url('https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst5{
background-image:url('https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst6{
background-image:url('https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst7{
background-image:url('https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst8{
background-image:url('https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
#tst9{
background-image:url('https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png');
transition:all 0.3s;
color:transparent;
background-size:50px 25px;
background-repeat:no-repeat;
background-position:center;
}
}
<span id="tst1">Restrooms</span>
<span id="tst2">Public grills</span>
<span id="tst3">Accessible equipment</span>
<span id="tst4">Indoor area</span>
<span id="tst5">Fully fenced</span>
<span id="tst6">Partially fenced</span>
<span id="tst7">Animals</span>
<span id="tst8">Pool or beach</span>
<span id="tst9">Toddler Area</span>
I have done little modification to your code to make things working.Please run it full screen and reduce the browser's size to see the changes.
Also, replace the areas of your code with this code and apply css.I have taken 991px as breakpoint, but you can take breakpoint of your choice.
Related
I know that gradients simply match the dimensions of whichever element they are applied to. Although, is there a way to visually make the gradient static and mask out parts that should not be visible?
My intention is to have the countdown timer become darker as it approaches the end of its evolution. Currently, my gradient retains the left and right color while simply reducing the colors in between:
(function() {
function resetCountdown() {
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.remove("countdown-reset");
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.add("countdown-reset");
});
});
}
resetCountdown();
document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);
})();
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #ffffff;
}
/* Fill */
#countdown-evolution {
height: 100%;
width: 100%;
transform-origin: left;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* Reset */
.countdown-reset {
transition: transform 15s linear;
transform: scaleX(0);
}
/* Reference */
.fixed-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div id="countdown-background">
<div id="countdown-evolution"></div>
</div>
<div class="fixed-background"></div>
</body>
</html>
I have already tried to make countdown-background a gradient and countdown-evolution a solid color, which is basically what I am after. However, this causes more problems than it solves; because now I have to fix my countdown timer and I cannot seem to make it look the same as before:
(function() {
function resetCountdown() {
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.remove("countdown-reset");
window.requestAnimationFrame(function() {
document.getElementById("countdown-evolution").classList.add("countdown-reset");
});
});
}
resetCountdown();
document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);
})();
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* Fill */
#countdown-evolution {
height: 100%;
width: 100%;
transform-origin: left;
background-color: #ffffff;
}
/* Reset */
.countdown-reset {
transition: transform 15s linear;
transform: scaleX(0);
}
/* Reference */
.fixed-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
</head>
<body>
<div id="countdown-background">
<div id="countdown-evolution"></div>
</div>
<div class="fixed-background"></div>
</body>
</html>
I appreciate any suggestion that can help me achieve the described outcome. Thank you.
Use another element as a curtain and absolute positioning along with css keyframes:
document
.querySelector("#countdown-evolution-curtain")
.addEventListener('animationend', () => {
console.log('Animation ended');
});
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #ffffff;
position: relative;
}
#countdown-background div {
position: absolute;
right: 0;
top: 0;
}
/* Fill */
#countdown-evolution-curtain {
background: #fff;
height: 100%;
width: 0%;
animation: reveal 10s linear;
}
#countdown-evolution {
height: 100%;
width: 100%;
background: linear-gradient(to right, #6419cd, #3273fa);
}
#keyframes reveal {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div id="countdown-background">
<div id="countdown-evolution"></div>
<div id="countdown-evolution-curtain"></div>
</div>
There is different ways to achieve this with only one element:
Using an extra white layer on the above with another gradient
Using fixed value for the gradient color stops
Using background-clip to clip the background in the content area by animating the padding
Using a mask layer
Using a pseudo element as extra layer
/* Reference */
.reference {
height: 50px;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* (1) */
.first {
background:
linear-gradient(#fff,#fff) right no-repeat,
linear-gradient(to right, #6419cd, #3273fa);
animation:first 5s linear forwards;
}
#keyframes first{
from {
background-size:0% 100%,auto;
}
to {
background-size:100% 100%,auto;
}
}
/* (2) */
.second {
background:linear-gradient(to right, #6419cd 0, #3273fa 100vw) left no-repeat;
animation:second 5s linear forwards;
}
#keyframes second{
from {
background-size:100% 100%;
}
to {
background-size:0% 100%;
}
}
/* (3) */
.third {
background-clip:content-box;
animation:third 5s linear forwards;
}
#keyframes third{
from {
padding-right:0%;
}
to {
padding-right:100%;
}
}
/* (4) */
.fourth {
-webkit-mask:linear-gradient(#fff,#fff) left no-repeat;
mask:linear-gradient(#fff,#fff) left no-repeat;
animation:fourth 5s linear forwards;
}
#keyframes fourth{
from {
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
}
to {
-webkit-mask-size:0% 100%;
mask-size:0% 100%;
}
}
/* (5) */
.fifth{
position:relative;
}
.fifth::before {
content:"";
position:absolute;
background:#fff;
top:0;
right:0;
bottom:0;
animation:fifth 5s linear forwards;
}
#keyframes fifth{
from {
left:100%;
}
to {
left:0%;
}
}
<div class="first reference"></div>
<div class="second reference"></div>
<div class="third reference"></div>
<div class="fourth reference"></div>
<div class="fifth reference"></div>
<div class="reference"></div>
I have made a button that basically will go on top of a leaflet map. It uses animate.css and wow.js to animate certain things and it works ok. It is made up of a div, an image, text and a span. What I need to do is make the whole thing into a div or something that I can resize and move without changing all the CSS etc. If I want to add an extra 2 or 3 buttons it will be a lot of hassle. I need to be able to move and resize depending on the screen resolution. I want to be able to use media queries to change just one thing like the size and position of the div but maintain the functionality.
I have tried putting everything into a new div but no joy!
I have included a fiddle http://jsfiddle.net/eLron3d2/1/
The HTML is :
<div id="start_box" class ="animated bounceIn">
<img id="target" class="targetimg" src="https://www.faces2places.co.uk/img/target.png" onclick="golive()"></img><button id="startbutton" type="button" class="btn-target animated bounceInLeft"></button>
<span id="status" class="btn-target-name animated fadeIn delaydn">START</span>
</div>
The CSS is :
#start_box {
position: fixed;
top: 10px;
/* right: 20px; */
left: 10px;
z-index: 2;
border: 2px solid;
border: radius:20px;
border-radius: 5px;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width: 80px;
height: 80px;
background-color: white;
border-color: #969696;
}
.targetimg {
position:relative;
top: 4px;
left: 8px;
border-radius: 2.5px;
display:flex;
width:60px;
height:60px;
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.btn-target {
background-color: white !important;
position: fixed;
width: 72px;
height: 16px;
top: 67.5px;
left: 2.2px;
color: #000000;
border: 2px solid #969696;
border-radius: 5px 5px 5px 5px
}
.btn-target-name {
color:green;
font-family: 'Passion One', cursive;
display: block;
width: 76px;
top: 70.5px;
font-size: 12px;
font-weight:0;
text-align: center;
position: fixed;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1s;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
And the JS is
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#target").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#target").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}
Ok, I have done it like so
http://jsfiddle.net/eLron3d2/2/
I wrapped everything into a button and changed pretty much everything to % not fixed sizes. I can change the size and position of it in the .target css
It works pretty good apart from I would like to change the font size to automatically change to fit but that one thing is easy to do with media queries, at least I don't have to change everything. The only thing is, the font does'nt load and show properly in jsfiddle but works on all browsers I have checked it with.
The HTML for 2 buttons is
<button class="btn target animated fadeIn"><span id="btn1" class="btnimage animated rubberBand" onclick="golive()"></span><span class="btn1textbox animated bounceInLeft"></span><span id="status" class="btn1text animated delaydn fadeIn">START</span></button>
<button class="btn target animated fadeIn delaybox"><img class="driverimg animated fadeIn" src="http://www.faces2places.co.uk/img/jules.jpg" onclick="alert('FUCKME')"></img><span class="btn1textbox animated bounceInLeft delaybox"></span><span id="status" class="btn1text animated delaydn2 fadeIn">JUSTIN.C</span></button>
The CSS is
.btn {
position: relative;
display: block;
margin-bottom:12px;
color: white;
font-size: 16px;
cursor: pointer;
border: 2px solid;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width:80px;
height:80px;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
.target {
left:100px;
width:80px;
height:80px;
top:100px;
}
.btn1textbox {
position: absolute;
left: 5%;
top: 92%;
display: inline-block;
color: white;
border: 2px solid;
width: 86.5%;
height: 16%;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
/* Darker background on mouse-over */
.btn:hover {
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.btnimage {
position: relative;
background:url(https://www.faces2places.co.uk/img/target.png) no-repeat center;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
top:-4px;
}
.btndriver {
position: relative;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
}
.btn1text {
font-family: 'Passion One', cursive;
color:green;
position: relative;
display: inline-block;
width:100%;
height:100%;
top: -12px;
font-size: 13px;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .8s;
}
.delaybox {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .5s;
}
.delaydn2 {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1.3s;
}
button:focus {outline:0;}
.driverimg {
position:relative;
top:-1;
border-radius: 2.5px;
display:inline-block;
width:100%;
height:100%;
}
and the JS is
new WOW().init();
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#btn1").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#btn1").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}
So for my website, I have a portfolio page and I want to design a simple image thumbnail for my Google doc or Word documents to link essays and stuff. The same for PDFs, Slides, etc.
I want the logo or letter to be shown and when you hover on it, I want a title card to "pop" up and like bounce up a bit and then when you hover off, I want the card to slide down and disappear.
In theory, this is what I want it to look like:
Whether it just slides up and then slides down or shoots up, bounces like it's hitting the bottom of the square, then falls down, doesn't matter - I'm just wondering how to do this.
There are a ton of different ways to do this.
Here is a CSS only way.
Basically, you would create a different class name for each title card that you want to have a hover pop-up caption. I use a pseudo selector for the content in the hover pop up.
Hope this helps!
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
background: #e8e8e8;
border: 1px solid #fff;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
border-radius: 6px;
color: black;
padding: 10px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hello from the other side!";
}
.title-card.caption-b::before {
content: "It's tricky!";
}
.title-card.caption-c::before {
content: "Don't call it a comeback!";
}
.title-card.logo-a {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
}
.title-card.logo-b {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4);
}
.title-card.logo-c {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}
.title-card.logo-d {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49);
}
<div class="title-card logo-a caption-a">I have a caption, hover over me!</div>
<div class="title-card logo-b caption-b">I have a caption, hover over me!</div>
<div class="title-card logo-c caption-c">I have a caption, hover over me!</div>
<div class="title-card logo-d">I don't have a hover caption :(</div>
I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books.
I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.
On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.
Thank you for reading and I welcome your suggestions for this front-end noob.
Below is my problematic code:
<!DOCTYPE html>
<body>
<header>
<div class="hero" id="Portfolio">
<div class="overlay"></div>
<div class="page-subject">
<!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
<h1>Portfolio</h1>
<div class="container space-around">
<div><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></div>
<div><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></div>
</div>
</div>
</div>
</header>
html, body {
height:100%;
padding:0;
margin:0;
font-family: Raleway,sans-serif;
color:#FFF;
}
header {
height: calc(100% - 65px);
background:#333;
-webkit-perspective: 1500px;
perspective: 1500px;
perspective-origin: center bottom;
}
h1 {
margin:0;
vertical-align: middle;
text-align:center;
font-size:80px;
font-weight:600;
text-transform:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.hero#Portfolio {
position:relative;
background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
background-size:cover;
height: 100%;
width:100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display:table;
}
.hero .overlay {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
opacity:0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
vertical-align: middle;
}
.container {
display: flex;
}
.container.space-around {
z-index: 10;
justify-content: space-around;
padding-bottom: 10px;
}
a {
position: relative;
z-index: 1;
}
a.hvr-pop img {
background: white;
border-radius: 25px;
display: block;
min-width: 64px;
max-width:128px;
min-height: 64px;
max-height:128px;
width: auto;
height: auto;
}
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
'use strict';
// This creates to folding animation
$(window).scroll(function() {
var heroHeight = $('header').height();
var yPosition = $(document).scrollTop();
if (yPosition <= heroHeight) {
var effectFactor = yPosition / heroHeight;
var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
$('.hero').css({
'-webkit-transform': 'rotateX('+rotation+'rad)',
'transform': 'rotateX('+rotation+'rad)',
})
.find('.overlay').css('opacity', effectFactor);
}
/**
* Sticky nav-bar
*/
if (yPosition <= heroHeight) {
$('nav').removeClass('fixed');
} else {
$('nav').addClass('fixed');
}
});
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("nav ul a.current").removeClass("current");
$("nav ul a[href='" + pathname + "']").addClass("current");
});
Just add this:
div.page-subject {
vertical-align: middle;
display: table-cell;
}
Here is Fiddle.
How about this.
Use div.page-subject instead of the tag and use
div.page-subject {
vertical-align: middle;
display: inline-block;
width: 100%;
text-align: center;
font-size: 1.2rem;
margin: 1rem 0;
}
Centering things horizontally is easy.
display: block;
margin: auto;
position: relative, absolute, or fixed depending...
Centering thing vertically takes more work and I always do it this way.
top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
However you can also do it all with transforms
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;
If using transforms don't forget to use vendor prefixes.
I use this auto prefixer: http://pleeease.io/play/
Try this
.hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
to center a div horizontally try to use this one
/* lets say its width is 500px */
.hero{
width:500px;
display:block;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
}
if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one,
.hero {
width:500px;
height:500px;
position:absolute;
left:50%; /* centers horizontally on the screen */
top:50%; /* centers vertically on the screen */
background-repeat:no-repeat;
background-position:center;
margin:-250px 0 0 -250px; /* is width and height divided by two */
background:#FFFFFF;
}
You have to set overlay element as a parent of a .hero element and overlay element should be like this one,
.overlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:9999; /* makes sure it stays on top */}
In my site I have a switch between a down arrow & and an up arrow. See here
How do I change this to a CSS transition, so there's a brief break between the switch?
Here's my code:
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>
You can do this in 2 ways that I can think of. One is by jQuery-UI and add a
.delay(2000)
to the end of your transition. The other way is in your css class for your transition is do a
transition-delay: 2s;
For the arrow, it would be better to transition and rotate the image.
.rotate{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
Here is a neat website to help you with that: http://www.css3maker.com/css3-transition.html