<div class="container">
<div class="wrapper">
<div class="vignetta" id="sfumatura"></div>
<img src="https://www.dangeloweb.it/wp-content/uploads/2020/07/gradiente-radiale-effetto-vignetta.jpg">
</div>
<div class="wrapper hero">
<h1>Qui il titolo</h1>
<button class="pulsante" onclick="myFunction()">SFUMATURA ON/OFF</button>
</div>
</div>
body{
font-family:sans-serif;
}
h1 {
font-size:45px;
color:#222222;
}
.container {
display:flex;
width:100%;
background:rgba(221,209,197,1);
}
.wrapper {
position:relative;
text-align:center;
xwidth:50%
}
.hero {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.vignetta {
position:absolute;
top:0;
left:0;
width:400px;
height:100%;
background-image:
radial-gradient(
circle at center left,
rgba(221,209,197,0) 40%,
rgba(221,209,197,1) 80%
);
}
img {
width:400px;
display:block;
}
.pulsante {
background-color:#a45d2f;
padding:14px 20px;
border-radius:40px;
font-weight: bold;
color:#ffffff;
border:none;
cursor:pointer;
}
button:hover {
background: #a36742;
}
button:focus {
outline: none;
}
button:active {
transform: scale(0.99);
}
function myFunction() {
var element = document.getElementById("sfumatura");
element.classList.toggle("vignetta");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.