Im working on a spot the difference game.
So far I have an image with a difference shown by a red circle for testing.
I also have a dot (a button currently blue for testing but transparent for final) which will be what the user clicks on to get the difference.
I need help getting the dot to stay within the red circle when the browser window is resized.
Here is a link to my JSFIDDLE and the code is below
CSS:
.position001{position:relative}.block001{position:absolute;top:50px;left:673px;background-color:#7fffd4;border-radius:50%}.button001{background-color:transparent;border:1px solid transparent;width:45px;height:42px}.hide001{outline:0;border:none}
HTML
<div class="position001">
<div id="board001">
<button class="hide001" onclick="incorrect001()">
<img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />
</button>
<div class="block001">
<div id="disappear001">
<button class="button001" onclick="correct001()"></button>
</div>
</div>
</div>
</div>
This may help you to get going!
You have to use the height and width in vw since the screen changes and the size of the circle should also align with the view port.
Second, you can use Media query however I don't think that is a feasible option for you unless you're very good at handling media query when screen resolution changes, instead as suggested in my answer you can use vw for height, width and place another circle correctly, rest the property will take care of it.
.position001 {
position: relative;
}
.block001 {
position: absolute;
background-color: aquamarine;
border-radius: 50%;
top: 9.2%;
left: 61.4%;
width: 5vw;
height: 5vw;
}
.button001 {
background-color: transparent;
border: 1px solid transparent;
width: 45px;
height: 42px;
}
.hide001 {
border: none;
outline: none;
}
<div class="position001">
<div id="board001">
<button class="hide001" onclick="incorrect001()">
<img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />
</button>
<div class="block001">
<div id="disappear001">
<button class="button001" onclick="correct001()"></button>
</div>
</div>
</div>
</div>
You should put the blue dot and red circle under a div element. Then let the div's position be relative, and the dot and circle's position absolute And you can then position the div in order to position both the red circle and the blue dot. They will always be in the same area, above each other.
This is because the absolute position will make an elements position at 0, 0 regardless if there is another element there, or even 100 elements. But because absolute position can be modified if the element is under a relatively-positioned element, we can take advantage of that to easily position both the dot and the circle, and place them on top of each other.
Graphical demonstrations in here: https://css-tricks.com/how-to-stack-elements-in-css/
Related
I want to scale the size of a div when it's hovered over to give a more detailed view of it's content.
I had two ideas on how to do it, firstly have an onHover that when hovered shows an absolute positioned div that is perhaps 125%-130% bigger than the relative div and place it on top. (I kind of like this idea as it allows me to make the new div have different content to the one underneath)
The other idea would simply be to scale the original div using transform. I don't really want to do this though as the div thats "popping over" is a more detailed version of the underlying content.
I can do that no problem, however the part I'm getting stuck with (and can't seem to find an answer for), is to scale the div in a certain direction based on where it is located in a container row.
I created an image describing it below.
The default behaviour would be something like:
as you can see, the default behaviour is that when we scale we are aligned to the left and the extra width will go outwards to the right and the extra height will go downwards
The issue with this is, on the far right, the div that scaled has done so, but because of its position/direction, it's now gone off and to the right (outside the container).
Likewise, I'd like for the 2 centre divs to scale from the centre rather than from left to right.
Just to note, not all divs will be expanded at once, but I highlighted it that way just for the purpose of this question.
The desired result that I would like (showing all expanded), would be something like:
obviously this is kind of hard to see with them all expanded, but if I show a centre div being expanded only:
and then the right most
So what is the difference?
Firstly, each div is vertically centred based on it's relative container (that's easy to do), but the part that I'm stuck with is how to tell the centre divs to expand from the centre both vertically and horizontally, but then tell the leftmost and rightmost divs, expand from centre vertically but horizontally go left to right or right to left etc.
In the last image above, the div knows that it is on the far right of the container and shouldn't expand the default way because it would overflow out of the container, so instead it expands inwards.
Is this possible with CSS only? Or is it a combination of CSS and JS.
I hope that makes sense!
Is this the sort of thing you're looking for? The bigbox div is a child of the small box and I've absolutely positioned it then used a bunch of utility classes to position the child div. Should be fairly self-explanatory but drop me a comment and I'll elaborate further.
* {
box-sizing: border-box;
}
.smallbox {
--offset: 0.5rem;
position: relative;
display: inline-block;
aspect-ratio: 2/1;
background-color: #dae8fc;
border: 1px solid #6c8ebf;
padding: 0.5rem;
margin: 1rem;
}
.bigbox {
font-size: 1.25rem;
position: absolute;
padding: 0.5rem;
background-color: #d5e8d4;
border: 1px solid #82b366;
width: 150%;
aspect-ratio: 2/1;
opacity: 0;
z-index: 1;
}
.smallbox:hover .bigbox {
opacity: 1;
}
.left {
left: calc(-1 * var(--offset));
}
.right {
right: calc(-1 * var(--offset));
}
.top {
top: calc(-1 * var(--offset));
}
.center {
left: 50%;
translate: -50%;
}
.middle {
top: 50%;
translate: 0 -50%;
}
.bottom {
bottom: calc(-1 * var(--offset));
}
.center.middle {
top: 50%;
left: 50%;
translate: -50% -50%;
}
<div class='smallbox'>
Some content
<div class='bigbox left top'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox center top'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox right top'>
Some content (but bigger!)
</div>
</div>
<br><br>
<div class='smallbox'>
Some content
<div class='bigbox left middle'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox center middle'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox right middle'>
Some content (but bigger!)
</div>
</div>
<br> <br>
<div class='smallbox'>
Some content
<div class='bigbox bottom left'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox bottom center'>
Some content (but bigger!)
</div>
</div>
<div class='smallbox'>
Some content
<div class='bigbox bottom right'>
Some content (but bigger!)
</div>
</div>
I want to set a background image on the floating bar on the bottom of my page: https://hartbodenreiniger.info/.
But sadly the background image gets cutted by each table cell..
I already tried two things:
1.Convert the table to divs and set the background image. This is working but I cannot display the button in the middle and center of the floating bar. This is needed to convert a table to divs:
jQuery('#wpfront-notification-bar > table').replaceWith( jQuery('#wpfront-notification-bar > table').html()
.replace(/<tbody/gi, "<div id='table'")
.replace(/<tr/gi, "<div")
.replace(/<\/tr>/gi, "</div>")
.replace(/<td/gi, "<span")
.replace(/<\/td>/gi, "</span>")
.replace(/<\/tbody/gi, "<\/div")
);
How can I center the Button?
Or my second solution was to create a overlay div and set this div to display:absolute; with an background image. But same problem. How do I center the button and also there is the problem that the overlay wrapper is above the text..
I think way 1 is the better way but how can I center that?
Do you have any idea or any other solution?
Kind regards
You can use line-height property. Try the code below and see the differences
.container{
height: 100px;
text-align: center;
border: 1px solid black;
}
.the-button{
height: 100%;
line-height: 100px;
}
button{
height: 30px;
}
<div class="container">
<div class="the-button">
<button>Hello</button>
</div>
</div>
<div class="container">
<div style="height:100%;">
<button>Hi</button>
</div>
</div>
I currently have a white SVG logo that I am using as my website is mostly dark backgrounds. However, I do have a section that is white so I am looking to change the colour of the logo to black while scrolling through the white section.
Here is a copy of the logo code and white section:
<!-- Logo -->
<div class="logo" style="display: block;">
</div>
<!-- About -->
<div class="scrollview about">
<div class="col-sm-3">
</div>
</div>
Here is my current styles:
.logo {
position: fixed;
top: 0;
left: 0;
margin: 20px;
padding: 2.8em 2.8em;
z-index: 9;
}
.logo a {
width: 95px;
height: 16px;
display: block !important;
background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
background-image: none,url('../img/logo-light.svg');
}
.about {
padding: 12.25em 10.25em;
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: auto;
z-index: 3;
}
I'm not sure if it can be done using only CSS, but if someone can even point me towards a plugin or script it would be much appreciated.
Thanks
You can't use CSS like that to change the style of an SVG that's in a separate file. CSS rules do not cross document boundaries.
To style the SVG, you would need to need to inline it in your HTML page.
Assuming you made that change, then you could add a scroll event handler to the page and watch the position of the logo. If you detect it is at the right point on the page (ie. it is over the white section), then you could add a class to it (or the <a> or the <div>). The class would change the colour of the logo using fill: black, or whatever.
Have you considered an easier solution? Such as giving the logo a dark outline, so that it stands out when over the white background?
The fill property in CSS is for filling in the color of a SVGs.
svg {
fill: currentColor;
}
But you can't change the color of your logo for specific section of your site.
i check your demo link and I found out that they are use jquery to add and remove css class from there logo.
So you need add jquery 2.3.+
get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
Now on scroll add function
$(window).on('scroll',function()
and in it just add
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.logo').addClass('logo-dark');
} else {
$('.logo').removeClass('logo-dark');
}
Here's demo on codepen I made for you hope this will help you.
I have seen both overflow scrolling with no scrollbars and Hide scrollbar for mobile devices while keeping the scroll ability ; unfortunately, both of these suggest a solution with position: absolute; and I think that I cannot really apply that to my problem.
The code in this example renders this:
Basically, the red outline boxes are divs of class .myBox, with a fixed width. These divs are side-by-side, in a container that is horizontally centered inside its container div. The top part is reserved for titles, which may be long. I'd like the titles to be rendered as on the right side one - but if they have focus, then I'd want the titles to scroll left-right with either keyboard arrow buttons, mouse wheel - or (also for mobile) dragging left and right.
Of course, since the right box's title has overflow: hidden;, there is no possibility to scroll. If I leave the scrollbar visible (overflow-x: scroll;) as on the left box, then the title is not visible at all (and I cannot scroll anyways).
So is it possible somehow to allow scrolling in the title parts of these boxes in this way (sort of like a marquee scroll behavior, but manual)?
Bonus question: is there a sort of a JavaScript library (or even better, a plain CSS solution), that would allow something similar - except, if the text is too long, it is truncated and ellipsis is added (so, instead of "My even longer" it should show "My even lon..." at start), then as you drag right to left, it also calculates ellipsis at start and at end - and when you come to the right end, it takes away the right ellipsis?
The example code is:
.mainHolder {
font-size: 14px;
border: 2px solid #999;
text-align: center; /* centers the span */
}
.centerer {
border: 2px solid #555;
display: inline-block; /* makes the span have the same width as its div contents*/
margin: 0;
padding: 0;
}
.myBox {
width: 8em;
border: 2px solid #F55;
border-radius: 0.5em;
display: inline-block; /* enables two myBox side-by-side */
}
.heading {
height: 1.25em;
border-radius: 0.25em;
background-color: #94B6F7;
overflow: hidden;
overflow-x: scroll;
}
/*just as example, remove the scroller of box2*/
#box2 .heading {
overflow-x: hidden;
}
<div class="mainHolder">
<span class="centerer">
<div id="box1" class="myBox">
<div class="heading">
My very long title
</div>
<div class="data">
Data: 1
</div>
</div>
<div id="box2" class="myBox">
<div class="heading">
My even longer title
</div>
<div class="data">
Data: 2
</div>
</div>
</span>
</div>
I have two img elements and I want the first image.png to go behind the transparent image.png. I have tried a lot of different things (z-index, transparent background color, rgba background color, positioning absolute and relative, nesting one in a div, making them both divs). Right now i've been trying to use a transparent .png image. The image .png is actually behind it, but it still shows through it. Please help.
html:
<body>
<main class="site-wrapper">
<div class="carnival"></div>
<div id="images">
<img id="divbox" src="images/divbox.png">
<img id="clown1" src="images/clown1.png">
</div>
</main>
</body>
js: (i did the styles in js b/c I was interested in learning how to do it that way):
//styles
//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";
//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";
Thanks for any help, please let me know if I can answer questions.
UPDATE:
Sorry for not being clearer. I have now achieved getting the image behind the other image, but since the image ontop is transparent, the image behind is showing. How do I stop this?
Here is an example of what is happening:
http://oi61.tinypic.com/2mw9egx.jpg
Notice the orange border is ontop so it is definitely ontop.
UPDATE 2:
This should make it really clear what I want. Again sorry for the confusion:
http://oi59.tinypic.com/eamb0n.jpg
I would do something like the following jsFiddle: http://jsfiddle.net/7gdx48fu/. Might need to reload a couple times to see a good example of the overlay working.
Create a wrapper DIV for your two images. Set that wrapper DIV's to position: relative so we can use absolute positioning on one of the images it contains. By doing this we prevent the absolute positioned image from potentially aligning itself elsewhere in the page, like the upper left corner of the browser window.
Then, set the position of our overlay image, the transparent PNG, to position: absolute along with top: 0 and left: 0 to align it with the first images upper left corner.
You can do this without using z-index if you watch the order you include your images. Place the image you want behind the transparent PNG in the markup first followed by the transparent PNG.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<img class="overlay" src="http://lorempixel.com/200/200/city">
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.25; /* using this to replicate the transparent PNG */
}
EDIT
The OP's requirements have changed to include how to prevent an image behind a transparent image from showing through the transparent image.
Here is an updated jsFiddle: http://jsfiddle.net/7gdx48fu/2/.
This approach I wrapped the transparent PNG in a wrapper DIV and set it's background color. I used white in my example but you may use any color.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="overlay">
<img src="http://lorempixel.com/200/200/city">
</div>
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: white;
top: 15px; /* shifting overlay for illustrative purposes - not use case code */
left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
opacity: 0.25; /* using this to replicate the transparent PNG */
}
Not perfect but I'm unsure of how else to proceed.
EDIT 2
It seems the OP wants to do a form of masking. You can do this with overflow: hidden.
I have updated the jsFiddle: http://jsfiddle.net/7gdx48fu/4/
In this updated answer I have kept the wrapper DIV and set it with a fixed width and height. Then applied overflow: hidden. What we are doing here is creating an invisible window that will only show content when it is within the dimensions of the window.
To have the image appear as if it is coming out of the base layer image simply adjust the position of the image inside the wrapper DIV. For the jsFiddle simply play with the value of top in .mask img.
This will need a little tweaking for the proper placement and size of the .mask DIV to fit your needs but hopefully points you in the right direction.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="mask">
<img src="http://lorempixel.com/200/50/city">
</div>
</div>
.img-container {
position: relative;
}
.mask {
position: absolute;
top: 25px;
left: 25px;
height: 100px;
width: 100px;
overflow: hidden;
border: 1px solid red; /* for illustrative purposes */
}
.mask img {
position: relative;
top: 25px;
}
Have you tried the css opacity property ?
#clown1{ opacity:0.3;}
make both images' position absolute instead of relative
for the above to work, some common ancestor (i.e. #images) must have a non-default position too (e.g. relative)
forget zIndex - all else being equal, the latter element will be "topmost"
put all the above in a CSS style sheet instead of in JS code!
Forgetting the other transformations and margins, etc, the core CSS that you need is:
#images {
position: relative;
}
#divbox, #clown1 {
position: absolute;
}
Put them both in a parent container. Make the parent have position: relative and put both images having position:absolute. That way they will stack.(Something like that that I didn't check The order of img's could be wrong - play around a bit.
CSS:
.parent > img.transparent {
position: absolute;
}
.parent > img {
position: absolute; opacity: 0.5
}
HTML:
<div class="parent" style="position:relative">
<img src="other.png" class="transparent"/>
<img src="transparent.gif"/>
</div>
Some more explanation: When you make a parent/ancestor element's position relative it means that its contents that are absolute will be relative to the parent and not to the whole window