I have two divs that contain poster images. I want to put another poster behind each of those and do the following:
offset it by some x and y values
overlay it with semi-transparent div to make it darker
reduce its size while maintaining aspect ratio
How can this be done within the existing grid and and without changes to the two posters in the front?
films = [
{id: 0, title: 'Welcome Home', year: 2009},
{id: 2, title: 'Aurie', year: 2001},
{id: 3, title: 'Hardship', year: 2005},
{id: 4, title: 'Forth to the past', year: 2004}]
data = {
film0: films[0],
film1: films[1],
film2: films[2],
film3: films[3]
}
function update() {
poster1 = "https://unsplash.it/458/679.jpg";
poster2 = "https://unsplash.it/458/679.jpg";
document.getElementById("name1").innerText = data.film1.title;
document.getElementById("name2").innerText = data.film2.title;
document.getElementById("year1").innerText = data.film1.year;
document.getElementById("year2").innerText = data.film2.year;
document.getElementById("poster1").setAttribute("src", poster1);
document.getElementById("poster2").setAttribute("src", poster2);
}
update();
body {
background-color: rgb(40, 40, 40);
}
div {
border: 1px solid red;
}
.container {
display: grid;
grid-template-columns: 20% 25% 8% 25% 20%;
grid-gap: 0.5%;
padding: 1%;
color: white;
font-family: sans-serif;
text-align: center;
}
.header,
.footer {
grid-column-start: 1;
grid-column-end: 6;
padding: 30px;
font-size: 50%;
}
.poster-container {
position: relative;
}
.poster {
object-fit: cover;
width: 100%;
height: 100%;
}
.title {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-top: 7%;
padding-bottom: 7%;
line-height: 150%;
font-size: 110%;
}
.year {
font-size: 90%;
}
.poster-container:hover > .title {}
a {
all: unset;
}
a:hover{
cursor: pointer;
}
.shutdown{
background-color: rgba(255, 0, 0, 0.5);
padding: 1%;
}
.shutdown:hover{
cursor: pointer;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="header"></div>
<div></div>
<div class="poster-container">
<img class="poster" id="poster1" />
<div class="title">
<a id="poster1-link" target="_blank">
<div class="name" id="name1"></div>
</a>
<div class="year" id="year1"></div>
</div>
</div>
<div></div>
<div class="poster-container">
<img class="poster" id="poster2" />
<div class="title">
<a id="poster2-link" target="_blank">
<div class="name" id="name2"></div>
</a>
<div class="year" id="year2"></div>
</div>
</div>
<div></div>
</div>
</body>
</html>
I managed to find a solution:
films = [
{id: 0, title: 'Welcome Home', year: 2009},
{id: 2, title: 'Aurie', year: 2001},
{id: 3, title: 'Hardship', year: 2005},
{id: 4, title: 'Forth to the past', year: 2004}]
data = {
film0: films[0],
film1: films[1],
film2: films[2],
film3: films[3]
}
function update() {
poster0 = "https://unsplash.it/458/679.jpg";
poster1 = "https://unsplash.it/458/679.jpg";
poster2 = "https://unsplash.it/458/679.jpg";
document.getElementById("name1").innerText = data.film1.title;
document.getElementById("name2").innerText = data.film2.title;
document.getElementById("year1").innerText = data.film1.year;
document.getElementById("year2").innerText = data.film2.year;
document.getElementById("poster1").setAttribute("src", poster1);
document.getElementById("poster2").setAttribute("src", poster2);
document.getElementById("poster0").setAttribute("src", poster0);
document.getElementById("poster3").setAttribute("src", poster0);
}
update();
body {
background-color: rgb(40, 40, 40);
}
.container {
display: grid;
grid-template-columns: 20% 25% 8% 25% 20%;
grid-gap: 0.5%;
padding: 1%;
color: white;
font-family: sans-serif;
text-align: center;
}
.header,
.footer {
grid-column-start: 1;
grid-column-end: 6;
padding: 30px;
font-size: 50%;
}
.poster-container {
position: relative;
}
.poster {
object-fit: cover;
width: 100%;
height: 100%;
}
.title {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-top: 7%;
padding-bottom: 7%;
line-height: 150%;
font-size: 110%;
}
.year {
font-size: 90%;
}
.remove {
background-color: rgba(255, 255, 255, 0.2);
padding: 5%;
font-size: 90%;
}
a {
all: unset;
}
a:hover {
cursor: pointer;
}
.shutdown {
background-color: rgba(255, 0, 0, 0.5);
padding: 1%;
}
.shutdown:hover {
cursor: pointer;
}
;
.poster0 {}
.double0 {
position: relative;
}
.double3 {
position: relative;
}
.poster0 {
position: absolute;
left: -50%;
top: -10%;
z-index: -1;
width: 80%;
height: 80%;
}
.poster3 {
position: absolute;
right: -50%;
top: -10%;
z-index: -1;
width: 80%;
height: 80%;
}
.overlay0 {
position: absolute;
left: -50%;
top: -10%;
z-index: 0;
width: 80%;
height: 80%;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay3 {
position: absolute;
right: -50%;
top: -10%;
z-index: 0;
width: 80%;
height: 80%;
background-color: rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="header"></div>
<div></div>
<div class="double0">
<div class="overlay0"></div>
<img class="poster poster0" id="poster0" />
<div class="poster-container">
<img class="poster" id="poster1" />
<div class="title">
<a id="poster1-link" target="_blank">
<div class="name" id="name1"></div>
</a>
<div class="year" id="year1"></div>
</div>
</div>
</div>
<div></div>
<div class="double3">
<div class="overlay3"></div>
<img class="poster poster3" id="poster3" />
<div class="poster-container">
<img class="poster" id="poster2" />
<div class="title">
<a id="poster2-link" target="_blank">
<div class="name" id="name2"></div>
</a>
<div class="year" id="year2"></div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>
Related
sorry for the poor question title this is one that is difficult to phrase.
I was wondering how one would go about creating an animation like this:
Something that I did notice about this was there was another container to the right of the navbar that seemed to handle the navigation.
Any help or information would be much appreciated, thanks!
CodePen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<navbar>
<div class="nav-ico">
<center>
<div class="ico-bar"></div>
<div class="ico-bar"></div>
<div class="ico-bar"></div>
</center>
</div>
<div class="navbar">
<div class="nav-bt">
work
</div>
<div class="nav-bt">
about
</div>
<div class="nav-bt">
pricing
</div>
</div>
</navbar>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
}
.navbar{
background-color: lightgray;
width: 10%;
height: 100vh;
padding: 5px;
font-size: 1.5em;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.nav-ico{
padding: 5px;
background-color: lightgray;
width: 10%; /* i know its not the best way ^^ */
}
.ico-bar{
width: 50px;
height: 5px;
background-color: black;
margin: 5px;
border-radius: 30%;
}
.nav-bt:hover{
transform: rotate(90deg);
}
JS
I think I might get what you want to achieve:
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.App {
font-family: sans-serif;
text-align: center;
width: 100%;
min-height: 100vh;
}
nav.sidebar {
width: 70px;
height: 100vh;
/* border: solid 1px red;*/
position: absolute;
top: 0;
left: 0;
background: lightgray;
}
nav > a {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(90deg);
margin: 0 0 10px 0;
transition: 300ms ease transform;
cursor: pointer;
text-decoration: none;
font-weight: 600;
color: black;
z-index: 4;
position: relative;
}
nav > a:hover {
transform: rotate(0deg);
}
nav > a:hover ~ div#piece {
width: 50px;
border-radius: 0% 100% 100% 0% / 0% 50% 50% 100%;
left: 40px;
}
nav.sidebar > div#piece {
width: 30px;
height: 100px;
position: absolute;
left: 50px;
border-radius: 0% 50% 50% 0% / 0% 50% 50% 100%;
pointer-events: none;
transition: 150ms ease width;
transition: 150ms ease border-radius;
transition: 150ms ease left;
background: lightgray;
z-index: 1;
}
import { useState, useRef, useEffect } from "react";
import "./styles.css";
export default function App() {
const navRef = useRef(null);
const [y, setY] = useState();
const [show, setShow] = useState(false);
useEffect(() => {
const handleMouseMove = (e) => setY(e.pageY);
document.addEventListener("mousemove", handleMouseMove);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
};
}, [navRef]);
return (
<div className="App">
<nav
ref={navRef}
className="sidebar"
onMouseOver={() => setShow(true)}
onMouseOut={() => setShow(false)}
>
<br />
<br />
work
<br />
<br />
about
<br />
<br />
pricing
{show && <div id="piece" style={{ top: y - 50 }} />}
</nav>
<pre>y: {y}</pre>
<pre>show: {`${show}`}</pre>
</div>
);
There is also a codepen for this Codepen
Interesting we can open a codepen and progressively go to the solution , it's difficult to answer without some code to go on ...
what about just begin by reproduce the html and css part to begin ?
for the part that i understand :
body{
margin: 0;
padding: 0;
}
.navbar{
background-color: lightgray;
width: 10%;
height: 100vh;
padding: 5px;
font-size: 1.5em;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.nav-ico{
padding: 10px;
background-color: lightgray;
width: 8.8%; /* i know its not the best way ^^ */
}
.ico-bar{
width: 50px;
height: 5px;
background-color: black;
margin: 5px;
border-radius: 30%;
}
.nav-bt:hover{
transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<navbar>
<div class="nav-ico">
<div class="ico-bar"></div>
<div class="ico-bar"></div>
<div class="ico-bar"></div>
</div>
<div class="navbar">
<div class="nav-bt">
work
</div>
<div class="nav-bt">
about
</div>
<div class="nav-bt">
pricing
</div>
</div>
</navbar>
</body>
</html>
My goal is to be able to vertically align animated text in a div element. I have tried looking for an answer on here, but can't seem to find any. Specifically, I've tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
vertical-align: middle;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
If anyone could help that would be great!
PS: I just want it vertically centered, not horizontally.
Thanks!
Add display: flex; align-items: center; to your textDiv. Your textDiv height is 80%, you should make it 100% if you want to center vertically on all screen
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
display: flex;
align-items: center;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
I'm trying to do a photo gallery. I have this code:
<head>
<style>
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.box {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
}
.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.box:target {
outline: none;
width: 100%;
height: 100%;
opacity: 1;
}
.box:target img {
border: solid 17px rgba(77, 77, 77, 0.8);
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45%;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}
</style>
</head>
<body>
<img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<div class="box" id="img1">
prev
X
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
next
</div>
<div class="box" id="img2">
prev
X
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
next
</div>
<div class="box" id="img3">
prev
X
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
next
</div>
</body>
But I want to add animation. I want the photos to come from the left when I click on "next" and from the right when I click on "prev", like a slider.
Is it possible to achieve it with CSS? For example with transform property? If not what script should I use?
You can do something like this with radio buttons. If you have a radio button at the top for each transition you want to make, you can use CSS to select on every radio button there is and add the CSS transitions as needed. Use <label>s instead of <a>s to check the radio buttons, and then make the actual radio buttons invisible. But this would take a lot of code and wouldn't scale very well. So if you plan on having more images, you have to add CSS for each on individually, which can be a lot of work.
Here is a quick example putting the images into a reel and sliding the whole thing side to side. It may not be exactly what you want, but it is much less code. It's at least a good starting place.
<head>
<style>
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.reel-wrapper {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
overflow: hidden;
}
.reel {
position: absolute;
width: auto;
height: auto;
display: flex;
transition: left 1s ease-in-out;
}
#radio-close:not(:checked) ~ .reel-wrapper {
outline: none;
width: 100%;
height: 100%;
opacity: 1;
}
.box {
position: relative;
width: 100vw;
height: 100vh;
}
.box img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
border: solid 17px rgba(77, 77, 77, 0.8);
}
input[type="radio"] {
display: none;
}
#radio-img1:checked ~ .reel-wrapper .reel {
left: 0;
}
#radio-img2:checked ~ .reel-wrapper .reel {
left: -100vw;
}
#radio-img3:checked ~ .reel-wrapper .reel {
left: -200vw;
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45vh;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}
.btn-prev {
left: 5vw;
}
.btn-next {
right: 5vw;
}
</style>
</head>
<body>
<input id="radio-close" type="radio" name="gallery-nav" checked>
<input id="radio-img1" type="radio" name="gallery-nav">
<input id="radio-img2" type="radio" name="gallery-nav">
<input id="radio-img3" type="radio" name="gallery-nav">
<label for="radio-img1"><img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"></label>
<label for="radio-img2"><img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80"></label>
<label for="radio-img3"><img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80"></label>
<div class="reel-wrapper">
<div class="reel">
<div class="box" id="img1">
<label for="radio-img3" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<label for="radio-img2" class="light-btn btn-next">next</label>
</div>
<div class="box" id="img2">
<label for="radio-img1" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<label for="radio-img3" class="light-btn btn-next">next</label>
</div>
<div class="box" id="img3">
<label for="radio-img2" class="light-btn btn-prev">prev</label>
<label for="radio-close" class="btn-close">X</label>
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<label for="radio-img1" class="light-btn btn-next">next</label>
</div>
</div>
</div>
</body>
Typically this kind of thing would be easier to do with JavaScript. You could just keep track of which image you are looking at, and then on clicking a button toggle the right classes to make CSS do the actual animation. It is much easier to manage for scale. But pure CSS solutions are always more fun.
*I'm using Bootstrap CSS grid and reset for this exercise. I'm adding the contents in WordPress, using Gutenberg. Please bear with me, my explanation might be difficult to understand - English isn't my first language.
--
So I've created a container with two borders on top to create an upside-down pyramid. This shows the previous container's background colour and image. I've also added an image with a diagonal gradient within the parent container as shown below:
/*------------------------------------*\
MAIN
\*------------------------------------*/
.header {
position: relative;
background: #2f2655;
height: 500px;
}
.header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
.header .logo {
text-align: center;
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
padding: 20px 0;
z-index: 5;
}
.header .logo a {
display: inline-block;
margin: 0 auto;
text-decoration: none;
}
.header .logo a h1 {
color: #fff;
}
.section {
position: relative;
overflow: hidden;
margin-top: -20px;
padding-top: 20px;
}
.section .surround {
position: relative;
padding-bottom: 40px;
}
.section .surround:before {
content: "";
position: absolute;
left: -8px;
width: 10%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
z-index: 5;
}
.section .surround:after {
content: "";
position: absolute;
right: -8px;
width: 90%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
z-index: 5;
}
.section.blue-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/nnHq6IP.png);
background-repeat: no-repeat;
background-position: top right;
z-index: 5;
}
.section.blue-wrapper .surround *:not(.btn-white) {
color: #fff;
}
.section.blue-wrapper .surround,
.section.blue-wrapper .surround:before,
.section.blue-wrapper .surround:after {
background-color: #00aeef;
z-index: 4;
}
.section.grey-wrapper .surround,
.section.grey-wrapper .surround:before,
.section.grey-wrapper .surround:after {
background-color: #e1e1e1;
}
.section .content {
text-align: center;
position: relative;
padding: 20px 0;
}
.section.grey-wrapper .section-title {
color: #777;
}
/*------------------------------------*\
MISC
\*------------------------------------*/
*.btn-white {
color: #fff;
margin: 1rem 0;
padding: 0.6rem 2.3rem;
background: none;
display: inline-block;
border: 1px solid #fff;
border-radius: 20px;
text-decoration: none;
transition: all 0.1s linear;
}
*.btn-white:hover {
text-decoration: none;
background: #fff;
color: #0e0048;
}
<!doctype html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="UTF-8">
<title>
<?php wp_title(''); ?>
<?php if(wp_title('', false)) { echo ' :'; } ?>
<?php bloginfo('name'); ?>
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
</head>
<body class="home">
<div id="mm-page">
<!-- header -->
<header class="header" role="banner" style="height: 200px;">
<div class="header-items">
<!-- logo -->
<div class="logo">
<a href="#">
<h1>Logo</h1>
</a>
</div>
<!-- /logo -->
</div>
</header>
<!-- /header -->
<div class="section blue-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<article class="content">
<h2 class="section-title">Coloured Wrapper</h2>
<p>This is a sample text.</p>
<a class="btn-white" href="#">Button</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="section grey-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<section class="content">
<h2 class="section-title" style="margin-bottom: 0;">Grey</h2>
</section>
</div>
</div>
</div>
</div>
</div>
My problem is: anything beneath the ::before element are unclickable. Are there any other ways I could code this while keeping the design?
Solutions I've tried:
Give ::before a set width of 380px, but this only fixes my problem for bigger screens.
Add the background-image within the section class instead. But the top-right border overlapping the background-image instead - not my desired result.
Use the property pointer-events: none on the ::before element.
Thank you arieljuod. This question is now answered.
I've added pointer-events: none inside ::before element.
I have this HTML :
Option 1
When I hover it, I can read http://localhost/#MyHash
And when I click on it, the url in the browser is http://localhost/#/MyHash
Why is this slash added ? Is there a workaround ?
I couldn't figure it out...
Extra :
It's a .NET MVC web solution with AngularJS, I don't know if this is relevant
I saw some topic about googlebot / SEO (URL fragments: a leading slash in your hash url - good or bad?) : I don't care about it, this is not for a public website.
Edit :
See it in JSFiddle : https://jsfiddle.net/y2nLaxh5/embedded/result/
Hover the green part an look on options proposed
(as it is in an iframe you should open in a new tab)
Edit2 :
(function () {
var app = angular.module("myApp", []);
app.controller("MenuController", ['$scope', function($scope) {
$scope.items = [
{
name: "Option 1",
url: 'MyUrl'
},
{
name: "Option 2",
url: 'MyUrl',
items: [
{
name: "SubOption 2-1"
}
]
}
];
function preprocessItems(items, depth) {
depth = typeof(depth) === "undefined" ? 0 : depth;
for (var i in items) {
items[i].depth = depth;
preprocessItems(items[i].items, depth + 1);
}
}
preprocessItems($scope.items);
}]);
})();
body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #CCC;
background-color: #333;
}
#background
{
position: fixed;
top: 15%;
bottom: 15%;
left: 15%;
right: 15%;
}
#LeftMenu
{
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 0;
}
#LeftMenu > .MenuContent
{
position: absolute;
width: 0;
height: 100%;
z-index:1;
}
#LeftMenu > .MenuContent > .MenuSlider
{
background-color: #000;
left: -200px;
position: relative;
width: 200px;
height: 100%;
padding: 10px 20px;
box-sizing: border-box;
transition: left 0.3s ease-out;
}
#LeftMenu:hover > .MenuContent > .MenuSlider
{
left: 0;
}
.MenuSlider h3
{
margin: 0 0 10px 0;
text-align: center;
}
.MainIcon
{
display: block;
text-decoration: none;
padding: 10px;
border-radius: 0 0 5px 0;
background-color: #1fa67a;
width: 200px;
height: auto;
box-sizing: border-box;
font-family: 'Nixie One';
font-size: 2em;
font-weight: bold;
color: #FFF;
}
.MainIcon > p
{
margin: 0;
}
.Activator
{
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.ActivatorCirle
{
position: absolute;
height: 400px;
top: -200px;
width: 400px;
left: -200px;
border-radius: 100%;
}
.ActivatorColumn
{
position: absolute;
height: 100%;
top: 0;
width: 30px;
left: 0;
}
.menuItem.dpt0 { font-size: 1.2em; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/ng-template" id="menuItem_renderer.html">
{{item.name}}
<div ng-if="item.items">
<div ng-repeat="item in item.items" ng-include="'menuItem_renderer.html'"></div>
</div>
</script>
<body ng-app="myApp">
<div id="background"></div>
<div id="LeftMenu" ng-controller="MenuController as menu">
<div class="Activator">
<div class="ActivatorCirle"></div>
<div class="ActivatorColumn"></div>
</div>
<div class="MenuContent">
<a class="MainIcon" href="/">
<p>Media<br />Content<br />Supervisor</p>
</a>
<div class="MenuSlider">
<h3>MENU</h3>
<div ng-repeat="item in items" ng-include="'menuItem_renderer.html'"></div>
</div>
</div>
</div>
</body>