Currently I'm making a band-site with HTML. My idea was to have a banner in the -tag where you can click on seperate members to go to there individual page, in an "about us"-page. The basics work, but I have 2 problems.
If I scale the page down the 's are responsive but if I scale up they aren't anymore.
The whole SVG works only on my laptop on any other device it does not work at all.
How can I fix this?
This is the, relevant, code I have right now:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html{
font-family:'Lato', sans-serif;
text-align:center;
background-color:#F1F1F1;
color:#212121;
font-size:1.0875vw;
}
#media screen and (max-width:1150px){
html{
font-size:12.50625px;
}
}
body{
margin:0px;
}
.afbeelding_container{
position:relative;
float:left;
}
.afbeelding_container .tekst_container{
position:absolute;
top:10px;
left:20px;
color:#FFFFFF;
}
.svg_container{
position:absolute;
top:0.625em;
left:1.25em;
}
.MenuButton{
font-size:38px;
cursor:pointer;
color:#F1F1F1;
float:left;
}
#media screen and (max-width:441.92px) {
.MenuButton {
font-size:8.2vw;
}
}
</style>
</head>
<body>
<nav style="width:100%">
<div style="width:100%" class="afbeelding_container">
<img src="Afbeeldingen/Jeopardy Banner 1.jpg" style="width:100%">
<div class="svg_container">
<svg viewBox="0 0 1600 460">
<g class="hover_group" opacity="0">
<a href="maudn.html">
<rect x="195.2" y="54.4" width="228.8" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="maudj.html">
<rect x="448" y="54.4" width="214.4" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="bjorn.html">
<rect x="691.2" y="54.4" width="234.56" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="anne.html">
<rect x="960" y="54.4" width="200" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="merwin.html">
<rect x="1174.4" y="54.4" width="219.52" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<a href="https://www.sophiebik.nl">
<rect x="0" y="403" width="100" height="56" style="fill:blue;fill-opacity:0"/>
</a>
</svg>
<div class="tekst_container">
<p><div id="myNav" class="overlay">
×
<div class="overlay-content" style="margin-left:1.vw">
<a href="index.html" >Home</a>
Over ons
Contact
</div>
</div>
<span class="MenuButton" id="MenuButton" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.getElementById("MenuButton").style.color = "#222";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("MenuButton").style.color = "#F1F1F1";
}
</script>
</p>
</div>
</div>
</div>
</nav>
</body>
</html>
I would suggest abandoning your plan of using a scalable SVG for this and simple allow the box to be sized by your images, and place boxes inside it absolute to align with the image position. The below example is very simple, and once you have your percentage locations and widths, the example will scale up and down perfectly:
header {
position: relative;
width: 80vw;
height: auto;
margin: 0px auto;
}
header img {
width: 100%;
}
header a {
position: absolute;
border: 1px solid red;
}
header a#member1 {
width: 23%;
height: 25%;
top: 25%;
left: 13%;
}
header a#member2 {
width: 13%;
height: 55%;
top: 5%;
left: 43%;
}
header a#member3 {
width: 33%;
height: 15%;
top: 35%;
left: 65%;
}
<header>
<img src="http://placehold.it/900x300" />
Band Member 1
Band Member 2
Band Member 3
</header>
Keep in mind all my values are really just examples, as I have no idea what your actual desired result should look like.
Related
I need some help making the default Bootstrap carousel look/behave in a certain way.
Here's what I have for now..
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">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="carouselExampleControls" class="carousel carousel-dark slide w-75" data-bs-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="cards-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<div class="carousel-item">
<div class="cards-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<div class="carousel-item">
<div class="cards-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<svg viewBox="0 0 40 40"
class="svg-button prev">
<g fill="none" fill-rule="evenodd">
<rect opacity="1" width="38" height="38" rx="20" class="button-arrow"></rect>
<path d="M16.42 9L29 20 16.42 31 15 29.653 26.042 20 15 10.347z"
class="svg-content"></path>
</g>
</svg>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<svg viewBox="0 0 40 40"
class="svg-button">
<g fill="none" fill-rule="evenodd">
<rect opacity="1" width="38" height="38" rx="20" class="button-arrow"></rect>
<path d="M16.42 9L29 20 16.42 31 15 29.653 26.042 20 15 10.347z"
class="svg-content"></path>
</g>
</svg>
</button>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
</html>
CSS (SCSS)
body {
display: flex;
justify-content: center;
align-items: center;
}
.cards-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.cards-wrapper .card {
margin: 0 4.5rem;
background-color: white;
border: 1px solid black;
width: 12.5%;
height: 250px;
}
.svg-button {
border-radius: 50%;
height: 2.5rem;
width: 2.5rem;
}
.svg-button .button-arrow {
stroke-width: 1px;
stroke: rgb(224, 224, 224);
x: 1;
y: 1;
fill: rgb(255, 255, 255);
transition: fill 250ms ease 0s, opacity 250ms ease 0s;
opacity: 1;
width: 38;
height: 38;
rx: 20;
}
.svg-button .button-arrow:hover {
fill: rgb(224, 224, 224);
}
.svg-button .svg-content {
fill: black;
transition: fill 250ms ease 0s, opacity 250ms ease 0s;
d: path("M 16.42 9 L 29 20 L 16.42 31 L 15 29.653 L 26.042 20 L 15 10.347 Z");
}
.prev {
transform: rotate(-180deg);
}/*# sourceMappingURL=style.css.map */
As you can see the default behavior works, what I was looking for is removing the overlap between the cards (divs in this case) and the buttons once you click them. i tried changing the size of various containers but nothing worked without changing the style drastically, it is probably easier than it seems but I'm just stuck rn.
I want to display the youtube video in card image with no black bars on top and bottom of it. Here is the code that I have for full card:
.media-video-container {
position: relative;
overflow: hidden;
}
.media-video-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="list p-y">
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">
<a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">
<span class="block clear img-card b-b b-light text-center media-video-container ">
<img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>
</span>
<div class="box-body p-y-sm">
<div class="block clear text-sm">
{{item?.name}}
</div>
</div>
<button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
<path class="ytp-large-play-button-bg" d="..."
fill="#212121" fill-opacity="0.8"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
</button>
</a>
</div>
</div>
I would really appreciate any help :)
NOTE: I have already tried:
Responsive fullscreen youtube video with no black bars?
Responsive video iframes (keeping aspect ratio), with only css?
Try this, Thil will work, adjust the scale value as you wanted.
You can learn more about youtube image thumbnails here
.media-video-container {
position: relative;
overflow: hidden;
}
.media-video-container img {
/*position: absolute;
top: 0;
left: 0;*/
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
-webkit-transform: scaleY(1.2);
-moz-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);
}
<div class="list p-y">
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">
<a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">
<span class="block clear img-card b-b b-light text-center media-video-container ">
<img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>
</span>
<div class="box-body p-y-sm">
<div class="block clear text-sm">
{{item?.name}}
</div>
</div>
<button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
<path class="ytp-large-play-button-bg" d="..."
fill="#212121" fill-opacity="0.8"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
</button>
</a>
</div>
</div>
im trying to achieve the image below:
The lines coming out of each circle rotate infinitely(not hard to achieve it through css keyframes)
I tried doing this with 100s of divs and rotate 10degree each but failed to achieve my needs. so i thought about svg and i did something but it doesnt work as needed, the lines do not go fullscreen. fiddle above.
html,
body {
overflow: hidden;
}
.fw {
border-top: 1px red solid;
width: 2000px;
}
.wrapper {
overflow: hidden;
}
#-webkit-keyframes rotating
/* Safari and Chrome */
{
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.wrapper1 {
display: inline-block;
position: fixed;
-webkit-animation: rotating 10s linear infinite;
-moz-animation: rotating 10s linear infinite;
-ms-animation: rotating 10s linear infinite;
-o-animation: rotating 10s linear infinite;
animation: rotating 10s linear infinite;
}
<div class="wrapper" style="position:absolute;top:20%;left:10%;width:100%;height:100%;">
<div class="wrapper1">
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1097 1097" style="enable-background:new 0 0 1097 1097;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:red;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<g>
<line class="st0" x1="551.5" y1="0" x2="551.5" y2="1097"/>
</g>
<g>
<line class="st0" x1="1097" y1="555.5" x2="0" y2="555.5"/>
</g>
<g>
<line class="st0" x1="935.6" y1="152.6" x2="179.7" y2="947.6"/>
</g>
<g>
<line class="st0" x1="947.2" y1="931" x2="152.2" y2="175.1"/>
</g>
<g>
<line class="st0" x1="755.6" y1="41.3" x2="351" y2="1060.9"/>
</g>
<g>
<line class="st0" x1="1057.8" y1="755.8" x2="38.1" y2="351.2"/>
</g>
<g>
<line class="st0" x1="1055.4" y1="323.4" x2="59.6" y2="783.6"/>
</g>
<g>
<line class="st0" x1="781" y1="1051.6" x2="320.8" y2="55.8"/>
</g>
<g>
<line class="st0" x1="456.7" y1="13.2" x2="646.2" y2="1093.7"/>
</g>
<g>
<line class="st0" x1="1090" y1="466.2" x2="9.5" y2="655.6"/>
</g>
<g>
<line class="st0" x1="861.4" y1="97.1" x2="254.2" y2="1010.8"/>
</g>
<g>
<line class="st0" x1="1007.3" y1="861.9" x2="93.6" y2="254.7"/>
</g>
<g>
<line class="st0" x1="664.9" y1="18.6" x2="442.5" y2="1092.8"/>
</g>
<g>
<line class="st0" x1="1085.9" y1="670.2" x2="11.7" y2="447.8"/>
</g>
<g>
<line class="st0" x1="1008.9" y1="244.7" x2="107.6" y2="870"/>
</g>
<g>
<line class="st0" x1="864.4" y1="1009.4" x2="239.1" y2="108"/>
</g>
</g>
</svg>
<div style="position:fixed;top:50%;left:50%;margin:0px auto;display:block;text-align:center; width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;">Support</div>
</div>
</div>
it would be great if you could at least point me on some resources to achieve what i need.
Thanks in advance.
I would consider the circle as the main element and I would use a pseudo element that I fill with all these lines using rotated SVG background.
body {
margin::0;
overflow:hidden;
}
.circle {
height:100px;
width:100px;
margin:50px;
background:red;
border-radius:50%;
position:relative;
}
.circle:before {
content:"";
position:absolute;
top:-5000%;
left:-5000%;
right:-5000%;
bottom:-5000%;
background-image:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(20deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(40deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(60deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(80deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(100deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(120deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(140deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>'),
url('data:image/svg+xml,<svg style="transform:rotate(160deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="0.05" /></svg>');
background-size:100% 100%;
animation:animate 6s infinite linear;
}
#keyframes animate {
from {
transform:rotate(0);
}
to {
transform:rotate(360deg);
}
}
<div class="circle">
</div>
And to make thing easier you may rely on JS to generate the code of the background:
var all = document.querySelectorAll('.circle');
for (var i = 0; i < all.length; i++) {
var c = all[i].getAttribute("data-color");
var s = parseInt(all[i].getAttribute("data-step"));
var b = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
var end = 180 / s;
for (var j = 1; j < end; j++) {
b += ',url(\'data:image/svg+xml,<svg style="transform:rotate(' + s * j + 'deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="5000" width="5000"><line x1="100" y1="0" x2="100" y2="200" stroke="' + c + '" stroke-width="0.05" /></svg>\')';
}
all[i].style.setProperty("--b", b);
all[i].querySelector('span').style.setProperty("background", c);
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle span {
position:relative;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
color:#fff;
}
.circle:after {
content: "";
z-index: -1;
position: absolute;
top: -5000%;
left: -5000%;
right: -5000%;
bottom: -5000%;
background-image: var(--b);
background-size: 100% 100%;
animation: animate 10s infinite linear;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<!-- step will define the degree between each line -->
<div class="circle" data-color="red" data-step="10">
<span>some text</span>
</div>
<div class="circle" style="top:150px;left:150px;" data-color="green" data-step="20">
<span>text</span>
</div>
<div class="circle" style="left:250px;" data-color="orange" data-step="30">
<span>more here</span>
</div>
<div class="circle" style="right:50px;bottom:50px" data-color="cyan" data-step="10">
<span>more here</span>
</div>
My idea initially came from thinking about pseudo-elements, but since you can only have 2 per element (::before and ::after) that is never going to give you the result you want.
So (unfortunately) we'll have to use a lot of divs, but what I came up with requires the least amount of divs (if we're not using pseudo-elements) and is very easy to change if you want more or less lines, or more or less space in between the lines.
body,
html {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.circle {
height: 150px;
width: 150px;
position: relative;
border-radius: 50%;
background-color: red;
animation: spin 20s linear infinite;
}
.line {
height: 1500%;
width: 1px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
z-index: -1;
}
.line1{transform: rotate(0deg);}
.line2{transform: rotate(4deg);}
.line3{transform: rotate(8deg);}
.line4{transform: rotate(12deg);}
.line5{transform: rotate(16deg);}
.line6{transform: rotate(20deg);}
.line7{transform: rotate(24deg);}
.line8{transform: rotate(28deg);}
.line9{transform: rotate(32deg);}
.line10{transform: rotate(36deg);}
.line11{transform: rotate(40deg);}
.line12{transform: rotate(44deg);}
.line13{transform: rotate(48deg);}
.line14{transform: rotate(52deg);}
.line15{transform: rotate(56deg);}
.line16{transform: rotate(60deg);}
.line17{transform: rotate(64deg);}
.line18{transform: rotate(68deg);}
.line19{transform: rotate(72deg);}
.line20{transform: rotate(76deg);}
.line21{transform: rotate(80deg);}
.line22{transform: rotate(84deg);}
.line23{transform: rotate(88deg);}
.line24{transform: rotate(92deg);}
.line25{transform: rotate(96deg);}
.line26{transform: rotate(100deg);}
.line27{transform: rotate(104deg);}
.line28{transform: rotate(108deg);}
.line29{transform: rotate(112deg);}
.line30{transform: rotate(116deg);}
.line31{transform: rotate(120deg);}
.line32{transform: rotate(124deg);}
.line33{transform: rotate(128deg);}
.line34{transform: rotate(132deg);}
.line35{transform: rotate(136deg);}
.line36{transform: rotate(140deg);}
.line37{transform: rotate(144deg);}
.line38{transform: rotate(148deg);}
.line39{transform: rotate(152deg);}
.line40{transform: rotate(156deg);}
.line41{transform: rotate(160deg);}
.line42{transform: rotate(164deg);}
.line43{transform: rotate(168deg);}
.line44{transform: rotate(172deg);}
.line45{transform: rotate(176deg);}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="wrapper">
<div class="circle">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="line line7"></div>
<div class="line line8"></div>
<div class="line line9"></div>
<div class="line line10"></div>
<div class="line line11"></div>
<div class="line line12"></div>
<div class="line line13"></div>
<div class="line line14"></div>
<div class="line line15"></div>
<div class="line line16"></div>
<div class="line line17"></div>
<div class="line line18"></div>
<div class="line line19"></div>
<div class="line line20"></div>
<div class="line line21"></div>
<div class="line line22"></div>
<div class="line line23"></div>
<div class="line line24"></div>
<div class="line line25"></div>
<div class="line line26"></div>
<div class="line line27"></div>
<div class="line line28"></div>
<div class="line line29"></div>
<div class="line line30"></div>
<div class="line line31"></div>
<div class="line line32"></div>
<div class="line line33"></div>
<div class="line line34"></div>
<div class="line line35"></div>
<div class="line line36"></div>
<div class="line line37"></div>
<div class="line line38"></div>
<div class="line line39"></div>
<div class="line line40"></div>
<div class="line line41"></div>
<div class="line line42"></div>
<div class="line line43"></div>
<div class="line line44"></div>
<div class="line line45"></div>
</div>
</div>
To achieve this without writing every line manually I used the Text
Pastry package for Sublime.
How would I hide the Playbutton when viewing the cover image, and show it after you click on the image?
I've been trying different ways, but can't seem to get it.
Full Code:
https://jsfiddle.net/0yxvpa09/12/
Click on the image to reveal a grid
Screenshot
<div class="playButton ">
<svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<script>
(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
}
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
</script>
(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
document.querySelector(".playButton").classList.remove("hide");
}
document.querySelector(".playButton").classList.add("hide");
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
.cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.links div {
margin: 0 0 12px 0;
}
.links a {
display: block;
width: 50px;
height: 50px;
background-color: green;
margin: -50px 0 0;
transition: 0.5s ease-in-out;
}
a.x1 {
margin: 0
}
a.x2 {
margin-left: 54px
}
a.x3 {
margin-left: 108px
}
a.x4 {
margin-left: 162px
}
a.x5 {
margin-left: 216px
}
.links a:hover,
.links a:active,
.links a:focus {
background: blue;
}
.scrl a:visited {
background: orange;
color: #000000;
}
.scrl a:hover {
background: red;
}
.hide {
display: none;
}
.links div:last-child {
margin-bottom: 0;
}
.playButton {
width: 50px;
height: 50px;
cursor: pointer;
background-color: #000000;
fill: #aaff00;
margin: -112px 0 0 108px;
}
.playButton.playing {
background-color: #000000;
}
<div class="cover">Links</div>
<div class="test hide">
<div class="links ">
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
</div>
</div>
<div class="playButton ">
<svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
</div>
Hide your play button div onload using your class hide. then remove it on click of cover element.
add
position:absolute;
z-index:999;
to your .cover class
and than added
position:absolute;
z-index:1;
to your .playButton class.
Just add the hide class to the play button and add document.querySelector(".playButton").classList.remove("hide"); to the hideClickedElement function.
JSFiddle: https://jsfiddle.net/0yxvpa09/19/
I want to have the rectangles in the svg tag to show up and change opacity on hover. I had this whole code working, but after adding a fixed div with a high z-index, the svg no longer worked (The hover effect has worked briefly but not consistently so I know that the elements are still where they should be).
<style>
.hover_group:hover
{
opacity:1;
}
#projectsvg
{
position: relative;
width: 100%;
vertical-align: middle;
margin: 0;
overflow: hidden;
margin:10px;
}
#projectsvg svg
{
position: relative;
float: left;
top: 0;
left: -199;
}
</style>
<div class="row" style="background-image: url(../img/home/blue_bk.jpg);">
<div class="col-xs-1 col-sm-0"></div>
<div class="col-xs-10 col-sm-5 col-lg-4">
<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="500 -50 920 1180" preserveAspectRatio="xMinYMin meet" >
//set your background image
<image width="1920" height="1080" xlink:href="../img/home/pain_chart3.png">
</image>
<!-- Shoulder-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="762" y="130.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
<!-- Hand-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="762" y="300.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
<!-- knee-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="862" y="560.1" opacity="0.2" fill="#FFFFFF" width="180.6" height="80.8"></rect>
</a>
</g>
<!-- Elbow-->
<g class="hover_group" opacity="0">
<a xlink:href="#">
<rect x="1132" y="190.1" opacity="0.2" fill="#FFFFFF" width="204.6" height="107.8"></rect>
</a>
</g>
</svg>
</figure>
</div>
<div class="col-xs-12 col-sm-7 col-lg-8">
<h1>hello</h1>
</div>
</div>
Is there any way to fix the bug, or do I have to write the code manually?