I have a jsfiddle I'm working on here: https://jsfiddle.net/laroy/f9dhrrgg/
as you can see, there is a 3D column type image that I've created. I would like to duplicate this, and move the duplication to the right and on top of the original, such that they are overlapping. I've tried figuring it out but haven't been able to, so any help would be appreciated.
The code is as follows:
.ultra {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: white;
z-index: 1;
}
.sub_ultra {
position: absolute;
bottom: 0;
height: 100px;
width: 200px;
overflow: hidden;
background-color: grey;
margin-top: 5em;
z-index: 1;
}
.right_side {
height: 390px;
width: 177px;
overflow: hidden;
background-color: yellow;
margin-left: 10em;
margin-top: -7em;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: -1;
}
.bottom_side {
height: 380px;
width: 142px;
overflow: hidden;
background-color: red;
margin-left: 7.1em;
margin-top: -6.8em;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: -1;
}
<div class="ultra">
<div class="sub_ultra"></div>
</div>
<div class="right_side"></div>
<div class="bottom_side"></div>
This can be easily accomplished by wrapping your image in a relatively positioned container and using jQuery clone to create another copy.
jQuery Fiddle
No jQuery Fiddle
HTML
<div class="container">
<div class="image-wrap">
<div class="ultra">
<div class="sub_ultra"></div>
</div>
<div class="right_side"></div>
<div class="bottom_side"></div>
</div>
</div>
jQuery
$(".image-wrap").clone().appendTo(".container").addClass("shifted")
Js (No jQuery)
var node = document.querySelector(".image-wrap").cloneNode(true);
node.className = node.className + " shifted";
document.querySelector(".container").appendChild(node);
New Css
.container {
position: relative;
margin-top: 20px;
display: inline-block;
}
.shifted {
position: absolute;
top: -20px;
right: -20px;
}
Related
I am trying to get the arrows to start at the exact same point and vary the rotations of the arrows. Below is an example of my code in HTML/JS/CSS and a picture of what i am running into. Any ideas as to how to make the pictures of these arrows overlap better at the origin?
HTML/JS
content.innerHTML= '<div id = "contain"><img class = "arrow" style="transform: rotate(90deg)" src="img/arrow_0]+'.png"</img><img class = "arrow" style="transform: rotate(60deg)" src="img/arrow_1.png"</img><img class = "arrow" style="transform: rotate(75deg)" src="img/arrow.png"</img></div>'
CSS:
#contain {
position: relative;
width: 104%;
height: 132%;
}
#contain img {
position: absolute;
top: 0;
left: 0;
}
.arrow {
transform-origin: 0% 0%;
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
position:absolute;
}
Any pointers appreciated many thanks!!
I think your issue is because the container size & then the transform-origin is at 0%, where as 50% from the top would work better.
.arrow {
width: 200px;
height: 10px;
position: absolute;
left: 200px;
top: 200px;
transform-origin: 100% 50%;
}
#contain-1 .arrow { background-color: red; transform: rotate(90deg); }
#contain-2 .arrow { background-color: green; transform: rotate(45deg); }
#contain-3 .arrow { background-color: blue }
<div id="contain-1">
<div class="arrow"></div>
</div>
<div id="contain-2">
<div class="arrow"></div>
</div>
<div id="contain-3">
<div class="arrow"></div>
</div>
i have a problem for css guru I'm not able to untangle.
This is the html:
<div class="container">
<div class="around">
<img class="depiction around-depiction"/>
<div class="label">A label</div>
</div>
<div class="around">
<img class="depiction around-depiction" />
<div class="label">Another label</div>
</div>
...
<div class="center">
<img class="depiction center-depiction" />
<div class="label">Center label</div>
</div>
</div>
I've applied a transform to .around element to move in a circle around the .center element.
I cannot manage to do two thing :
When i hover over an image the image and its label should go above everything (i put a z-index: 10000 but that doesn't work
Make the .around image above the .around label. You can see by figure two that hover doesn't work on label div.
This is the css:
.container .circle {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: calc(-100px / 2);
border-radius: 50%;
}
.center {
border-radius: 50%;
z-index: 1;
position: absolute;
}
.depiction {
border-radius: 50%;
cursor: pointer;
transition: 0.2s;
}
.around-depiction:hover {
transform: scale(4);
z-index: 1000000;
}
.center-depiction:hover {
transform: scale(2);
z-index: 1000000;
}
.label {
opacity: 0;
min-width: 200px;
z-index: -2;
background: white;
border-radius: 10px/20px;
padding: 5px;
border: 1px solid black;
}
.center:hover .label,
.around:hover .label {
opacity: 1;
z-index: 5;
}
.center .label:hover,
.around .label:hover {
opacity: 0;
}
Try adding the z-index with position: relative; on your image/label.
z-index doesn't work on the default, which is position: static;
https://coder-coder.com/z-index-isnt-working/
Currently, I am building a style guide and I have a question about the transition of an element. Imagine you have a container with two elements besides each other. Both have 50% width. The left element should always be visible, but the right element slides from the right into its 50% width. How can I achieve something like this? I am a bit overwhelmed with the top, bottom, left, right, position:absolute properties.
The html would look like this:
<div class="module-container">
<div class="first-element">
<div class="second-element">
</div>
and the css like this:
.module-container {
display: flex;
}
.first-element {
width: 50%;
}
.second-element {
width: 50%;
}
which properties does the second Element need in the first place? And which should I add via JavaScript after pressing, for instance, a button?
try using jQuery and transitions
$('#btn').click(function() {
$('.secondElement').toggleClass("slide");
});
.moduleContainer {
display: flex;
height: 100px;
overflow: hidden;
}
.firstElement {
position: relative;
width: 50%;
border: 1px solid #000;
}
.secondElement {
position: relative;
width: 50%;
border: 1px solid #000;
left: 100%;
transition: left 1s;
}
.secondElement.slide {
left: 0;
}
#btn {
display: block;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduleContainer">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
<button id="btn">Click Here</button>
.moduleContainer {
display: flex;
height:100px;
}
.moduleContainer > * {
border:1px solid red;
box-sizing:border-box;
overflow:hidden;
}
.firstElement {
height: 100%;
width: 50%;
}
.secondElement {
height: 100%;
width: 0%;
transition:width 0.3s ease;
}
.moduleContainer:hover .secondElement {
width:50%;
}
<div class="moduleContainer">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I have achieved it with pure CSS.I think it's good to have a bar, so the user can hover it and expand.I hope it will help you.
.moduleContainer{ display: flex;flex-flow: row nowrap; }
.firstElement{ background-color:blueviolet;flex:1;height:100px;position:relative;max-width: 50%; }
.secondElement{ background-color:aqua;height:100px;flex:1;max-width:1%;position:relative;transition:1s ease;left:48%; }
.secondElement:hover{ background-color: chartreuse;left:0px;max-width:50%; }
<div class="moduleContainer">
<div class="firstElement">First Element</div>
<div class="secondElement"></div>
</div>
You can use a negative value for margin-left of the .second-element.
.module-container {
display: flex;
height: 50px;
overflow: hidden;
}
.module-container:hover .second-element {
right: 0;
}
.first-element {
flex: 0 0 50%;
background: #f90;
}
.second-element {
flex: 0 0 50%;
background: #0f9;
right: -50%;
transition: all .6s ease;
position: relative;
}
<div class="module-container">
<div class="first-element"></div>
<div class="second-element"></div>
</div>
Or you can use position: absolute and animate the left property
.module-container {
position: relative;
height: 50px;
overflow: hidden;
}
.module-container:hover .second-element {
right: 0;
}
.first-element {
width: 50%;
background: #f90;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.second-element {
background: #0f9;
width: 50%;
position: absolute;
right: -50%;
top: 0;
bottom: 0;
transition: all .6s ease;
}
<div class="module-container">
<div class="first-element"></div>
<div class="second-element"></div>
</div>
I found a snippet of CSS somewhere on the Internet that re-creates the cool PayPal spinner, and I made a fiddle out of it:
https://jsfiddle.net/55s5oxkf/5/
It works great but I can't figure out how to place text right in the center of that spinner, something like "Loading...". I've tinkered and tried but can't get anything to work.
Here's the CSS:
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: 35%;
left: 45%;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
And the HTML:
<div id="divSpinner" class="spinner loading"></div>
Placing text in between the opening and closing div elements does nothing. Any ideas?
<center> is no longer supported (center deprecated in html5) so use a class like this:
.centered {
text-align: center;
}
Then use calc to get the correct position for the loading text:
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
$("#btnLoadRecords").click(function() {
$("#divSpinner").show();
setTimeout(function() {
$("#divSpinner").hide();
}, 10000);
});
.centered {
text-align: center;
}
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: calc(50% - 45px);
left: calc(50% - 45px);
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="centered">
<div id="divSpinner" class="spinner loading">
<div class="loading-text">Loading ...</div>
</div>
<button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button>
</div>
</body>
For the HTML:
<div id="divSpinner" class="spinner loading" style="display: none;">
<span>Loading…</span>
</div>
For the CSS, in addition to what you have:
.spinner.loading::before{
// Remove position, top, and left properties
margin: -15px auto -65px auto;
display: block (or flex);
}
This will make it work with your existing code, but what you’ve got is pretty hacky. If you want text to be inside your spinner, you should not use a ::before element. But given what you have, this will work.
this should center the content
html
<div id="divSpinner" class="spinner loading">
<p>hello</p>
</div>
css
.spinner.loading {
display: none;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: 0;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
Add this in your css:
.loading {
position: relative;
text-align: center;
line-height: 140px;
vertical-align: middle;
}
And then just add text in loading div between span, for example:
<div id="divSpinner" class="spinner loading">
<span class="text">Loading..</span>
</div>
And because loading has 8px border add this for text class:
.text {
margin-left: 15px;
}
I think something like this should get you going.
Why would an 'a' tag with href defined not be clickable, that ids wen you point on the pointer doesn't change and the link is not clickable? below is the actual code using Materialize css,
<div class="navbar-fixed">
<ul id="nav-mobile" class="side-nav">
<li><a class="black-text" href="mymenu.html">My Menu</a></li>
</ul>
</div>
.navbar-fixed {
position: relative;
height: 56px;
z-index: 997;
}
.navbar-fixed nav {
position: fixed;
}
.black-text {
color: #000000 !important;
}
side-nav {
position: fixed;
width: 300px;
left: 0;
top: 0;
margin: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
height: 100%;
height: calc(100% + 60px);
height: -moz-calc(100%);
padding-bottom: 60px;
background-color: #fff;
z-index: 999;
overflow-y: auto;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
you can use the next code:
li{
cursor:pointer !important
}
The important marker is not really necessary but it is to prevent, because I don't know if you are using bootstrapt or another similar framework. Try and coments your results!
Good luck!