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>
Related
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 would like to get a hover effect on my image, when the user goes over the image a background should appear on the image with some text (see example below). My css doesn't look like it at all unfortunately. It is not in the middle and the image is not round but more like an egg.
My question now is, how can I use CSS to make the image so that it is round and when going over it the text is displayed nicely in the middle.
I also use Bootstrap as an additional library, if it should be easier.
What I have:
What I want:
Pic.js
<div class="container-profilepic">
<img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
<div class="middle-profilepic">
<div class="text-profilepic"><i class="fas fa-camera"></i>
<div class="text-profilepic">Change it
</div>
</div>
Photo.css
.photo-preview{
width: 100% !important;
max-width: 125px !important;
height: 100% !important;
max-height: 125px!important;
border-radius: 50% !important;
}
.middle-profilepic {
transition: .5s ease;
opacity: 0;
position: absolute;
text-align: center;
}
.container-profilepic:hover .photo-preview {
opacity: 0.3;
}
.container-profilepic:hover .middle-profilepic {
opacity: 1;
}
.text-profilepic {
color: green;
font-size: 16px;
}
I checked this question befor out How do I add animated text on these images when I hover my cursor without changing current style?
Unfortunately it didn't help me.
I tried it before with top, left, postion...
.middle-profilepic {
transition: .5s ease;
opacity: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The result
So I removed it, because the result was much closer at what I want
Solution
You need to set the parent div with position: relative and the inner content (icon + image) as position: absolute elements, stretching to fit.
If you need the avatar image to ba an img tag you can use object-fit: cover in CSS (It has wide support nowadays: https://caniuse.com/?search=object-fit).
Tips
be careful the HTML you posted is invalid, has some broken tags
I vividly suggest you move away from using heavily !important within your CSS
Working example
body {
font-family: sans-serif;
}
.profilepic {
position: relative;
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
background-color: #111;
}
.profilepic:hover .profilepic__content {
opacity: 1;
}
.profilepic:hover .profilepic__image {
opacity: .5;
}
.profilepic__image {
object-fit: cover;
opacity: 1;
transition: opacity .2s ease-in-out;
}
.profilepic__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.profilepic__icon {
color: white;
padding-bottom: 8px;
}
.fas {
font-size: 20px;
}
.profilepic__text {
text-transform: uppercase;
font-size: 12px;
width: 50%;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
<div class="profilepic">
<img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text">Edit Profile</span>
</div>
</div>
Solution
Create a container with relative position and fixed height and width
Add an image as a background image respective to the container size
Add content with position: absolute
solution using bootstrap-5
.container-profilepic {
width: 150px;
height: 150px;
}
.photo-preview {
background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
background-size: cover;
background-position: center;
}
.middle-profilepic {
background-color: rgba( 255,255,255, 0.69 );
}
.container-profilepic:hover .middle-profilepic {
display: flex!important;
cursor: pointer;
}
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
</head>
<body>
<div class="container-profilepic card rounded-circle overflow-hidden">
<div class="photo-preview card-img w-100 h-100"></div>
<div class="middle-profilepic text-center card-img-overlay d-none flex-column justify-content-center">
<div class="text-profilepic text-success">
<i class="fas fa-camera"></i>
<div class="text-profilepic">Change it</div>
</div>
</div>
</div>
</body>
</html>
.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}
Also img tag it's self-closing tag
When the card is flipped, the front face is turned to the back and hidden, however, the back face is turned but not made visible. My intention is to have whichever side of the card is front-facing made visible. I have tried a number of variations of placing the backface-visibility attribute within different classes/ids but to no avail.
Below is my current code:
body {
background-image: url("imgs/Bike-Logo.jpg");
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
background: inherit;
}
.card {
width: 350px;
height: 500px;
background: inherit;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -250px;
border-radius: 8px;
background-color: #707075;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: 0;
right: 0;
/*frosted div effect*/
background: inherit;
box-shadow: 100px 0px 20px 200px rgba(255,255,255,0.5);
filter: blur(20px);
}
.flip_card_back {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.flip_card_front, .flip_card_back {
backface-visibility: hidden;
}
.sign_up_form {
position: relative;
margin: 10%;
background-color: red;
}
.sign_in_form {
position: relative;
margin: 10%;
background-color: blue;
}
.card figure {
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Login Page</title>
</head>
<body>
<div class="container">
<div id="card">
<div class="flip_card_front">
<form>
<div class="sign_in_form">
<figure>Front</figure>
</div>
</form>
</div>
<div class="flip_card_back">
<form >
<div class="sign_up_form" >
<figure>Back</figure>
</div>
</form>
</div>
</div>
</div>
<button id="flip">Sign In -></button>
<script src="javascript.js"></script>
</body>
</html>
I have a simple webpage I'm working on, and I wanted to add a search bar to the page. However, when I added the search bar, it wouldn't let me click/type in the bar. I eventually found out that I was able to click/type into it after removing this div:
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
This is used to put a logo on the header of my page, and I haven't been able to figure out why this breaks the search input. Obviously I want to keep this logo on my header, but any help would be appreciated.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
#background: url("src/header.png") no-repeat;
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input[type="text"] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type="text"]:focus {
width: 100%;
}
input[type="text"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: left;
}
input[type="text"]::-ms-input-placeholder {
/* Microsoft Edge */
text-align: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="imagediv">
<img src="src/smallpaw.png">
</div>
<h1>  Student Information</h1>
<br />
<form>
<input type="text" name="search" placeholder="Search" />
</form>
</body>
</html>
and here is my styles.css:
h1 {
font-family: "Roboto", "Arial";
}
.header {
overflow: hidden;
background-color: #522e81;
position: relative;
z-index: 1;
height: 77px;
}
.imagediv {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
max-width: 10%;
max-height: 10%;
}
input[type="text"] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets focus, change its width to 100% */
input[type="text"]:focus {
width: 30%;
}
Your imageDiv should be placed inside header div. That's the reason it's overlapping with input box and you are not able to type. Hope it helps man!
*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.