I've created a div-circle in which I want to hold (1) an image and (2) three div-waves (see image). My solution is working on desktop with Chrome, Firefox, Microsoft Edge, Internet Explorer. However, on my iPhone, the overflow doesn't work at all, either in safari or chrome. Here's an image of the difference in result. The relevant HTML looks like this:
<div class="circleContainer">
<div class="wavesContainer">
<div class="wave1" />
<div class="wave1" />
<div class="wave1" />
</div>
<img />
</div>
And the relevant CSS code looks like this:
.circleContainer {
border-radius: 300px;
height: 200px;
width: 200px;
background-color: #232323;
overflow: hidden;
position: relative;
border: #404040 solid 4px;
background-image: URL("pathToBackgroundImage");
background-size: 300px;
background-position: -20px;
transition: .5s;
opacity: 1;
}
.wavesContainer {
transition: .5s;
opacity: 1;
}
.wave1,
.wave2,
.wave3 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
}
.circleContainer img {
height: 220px;
top: 28px;
left: 18px;
opacity: 1;
transition: .5s;
position: absolute;
}
NOTE: The HTML and CSS are simplified, but I think the code above is all that is necessary to solve this issue.
Here is the code if you want to see it for your self: https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/
I am pretty experienced with CSS and still nothing I've tried work, so you guys are my last hope. I appreciate all the help I can get!
I solved this with a rather brute-force solution. Namely to create a rectangular shape (the red one in this image) with a transparent circle cut, as seen in this thread. I could then hard code some of the z-indices such that the rectangle only hides what I want it to. I also added a new circle with a border (the green one in this image) so I could keep the border around the circle.
It wasn't the solution I was hoping for, but it fully solved my problem!
Related
I've tried approaching this situation from multiple angles, but since I seem to be coming up short, I feel like getting a second perspective would help me.
This is probably a VERY simple question, but I for the life of me cannot figure it out, nor find an answer.
In short, I'm making a recreation website (basing it off an old flash site). There's an image that slides down and then gets cut off, and I have no clue how to do the cut off section.
Here is a photo illustrating that I've created a div with a 553x553px radius with an overflow:hidden tag but the image still appears outside the perimeters.
Here is the code for the divs and slide animation (it starts in the middle of the box then is suppose to slide down, cutting off half the image when it's finished):
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 775px;
}
.ctr {
display: absolute;
justify-content: center;
align-items: center;
height: 553px;
width: 553px;
overflow: hidden;
}
#slide {
position: absolute;
bottom: 100px;
width: 552px;
height: 343px;
overflow: hidden;
background-image: url('Intro/3.png');
-webkit-animation: slide 1s forwards;
animation: slide 1s forwards;
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#-webkit-keyframes slide {
100% { bottom: 0; }
}
#keyframes slide {
100% { bottom: 0; }
}
I don't feel like these are important to the problem, but since they're in the code, just to cover all my basis, here they are:
.bg {
position: absolute;
width: 795px;
left: 50%
margin-left: -300px;
}
.center {
height: 585px;
position: absolute;
}
And here is the code itself:
<body style="background-color:#421111;">
<div class = "flex">
<img src="bg.png" class="center">
<div class = "ctr">
<p id = "slide"></p>
</div>
<img src="108.png" class="bg">
</div>
(Just for clarity, "bg.png" is the purple inside, 108.png is the frame outline)
This is what I'm trying to achieve, based off the old site.
I know my image isn't far down enough compared to the original site, but I'm trying to fix this issue first. In any case, I'm simply wracking my brain here, since I don't understand how I can create a cutoff. I thought using overflow:hidden; would work, but it doesn't seem to...
Thank you in advance!
It seems that the image you are trying to cut off is outside of the div with the class="ctr".
This should fix your problem:
<body style="background-color:#421111;">
<div class = "flex">
<div class = "ctr">
<img src="bg.png" class="center">
<p id = "slide"></p>
</div>
<img src="108.png" class="bg">
</div>
An alternative would be to use either clip-path or a mask but I really wouldn´t recommend this.
However if you use these (clip-path or mask), make sure to apply it directly to the image itself.
If that also doesn´t work e.g. you don´t have browser support for this, try and do it with an animation or transition. An Example:
<style>
[cut]{
transition: width 1s, height 1s;
width: 600px;
height: 600px;
}
[cut]:hover{
transition: width 1s, height 1s;
width: 553px;
height: 553px;
}
</style>
It really is a fairly complicated problem to describe verbally. Take a look at this snippet:
$("button").on("click",() => {
$("#div1").css("transform","translateZ(50px)");
})
.testdiv {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transition: transform 1s;
backface-visibility: hidden;
}
#container {
position: absolute;
top: 100px;
left: 100px;
perspective: 500px;
}
#div1 {
background-color: #f00;
margin-left: 50px;
transform: translateZ(10px);
}
#div2 {
background-color: #0f0;
transform: translateZ(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1" class="testdiv">
1
</div>
<div id="div2" class="testdiv">
2
</div>
</div>
<button>Move 1 to front
</button>
Using both Firefox and Chrome on my mac, after clicking the "Move 1 to front" button, div1 is still covered by div2 even it's more out of the screen (translateZ value is higher). My expectation is that div1 should cover div2 once it surpasses div2 on the z-axis, since that makes more sense. (It's a little bit abstract I know)
Safari doesn't have this issue - so if you do happen to be able to run it on Safari, you'll see what I'm trying to describe. I'm not saying that Safari's implementation is superior, but in fact that is the behavior I'm looking for. Is there any way to achieve the same effect on Chrome and Firefox?
Turns out, adding transform-style: preserve-3d to the container does the job.
I have 3 elements that is growing on :hover using a CSS transition. Two of them work just fine, but the last one is flickering in Firefox, but works in Chrome and IE. So the problem is only there in Firefox.
CSS:
.contact{
width: 300px;
height: 250px;
margin: 10px;
margin-top: 37px;
float: right;
background-color: #eca83b;
border-radius: 10%;
transition: 0.5s;
}
.contact:hover{
width: 320px;
margin: 0px;
margin-top: 27px;
height: 260px;
}
HTML:
<section class="contact">
<svg>
</svg>
<h2 class="item">Contact</h2>
</section>
What can cause this problem?
I had exact same issue: on several sites I've built that use CSS transform scale, there's a flicker the first time you hover over the images. Afterwards they're fine. Doesnt happen on any other browser, and is only recent - obviously a bug in later versions of FF.
Anyway, just fixed it by, of all things, altering the greyscale filter. Try this CSS on your img:
filter: grayscale(1%);
It makes no noticable difference to the colour, but the flicker is gone!
backface-visibility: hidden tends to fix a lot of flickering issues, try giving it a shot.
Try putting:
will-change: transform;
Into your .contact
this will pre-render your object into 3d so it should not flicker.
Sometimes it also helps to put it into your class's children, like if you have
.contact > .img or something.
Add -moz-transition: for Firefox i have update in code here
give this a try it should work
.contact{
width: 300px;
height: 250px;
margin: 10px;
margin-top: 37px;
float: right;
background-color: #eca83b;
border-radius: 10%;
transition: 0.5s;
-moz-transition: 0.5s;
}
.contact:hover{
width: 320px;
margin: 0px;
margin-top: 27px;
height: 260px;
}
None of these worked for me, however I worked around the issue by setting visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.
An issue I'm having is strange lines appearing in certain situations. So far I only notice the issue in Webkit browsers. Also, I know my HTML is not done in the most efficient way, but for the purposes of my project, I would like it to remain the same, unless it is the cause of the issue. For my current work, it happens when I highlight text, or click certain things. This is a big issue since highlighting will be done a lot on my page. Please see my example below, note the extra blue areas in the first image are caused by highlighting text (not shown).
As you can see, when the page loads the lines are not present, however — after using the page for a bit, lines like this appear.
I did my best to recreate the problem in JS fiddle, and I was actually able to. If you highlight text, and then click off the text, you should see a line appear.
Here is my JSFiddle example.
Here is a a picture of the issue reproduced in JSFiddle.
HTML:
<div class="container">
<div class="background-image">
<div class="background-color"></div>
</div>
<div class="box">
<div>Highlight all text</div>
<div>Keep going!</div>
<div>Then click off to deselect</div>
</div>
</div>
CSS:
.container {
width: 500px;
height: 500px;
position: relative;
}
.background-image{
background: url('http://i.imgur.com/4pgHkXy.png') repeat;
-webkit-filter: blur(4px);
filter: blur(4px);
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
top: 0;
left: 0;
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
.background-color {
background: #00adee;
opacity: .5;
width: 500px;
height: 500px;
position: aboslute;
top: 0;
left: 0;
}
.box {
background: #fff;
top: 20px;
bottom: 20px;
width: 200px;
height: 300px;
position: absolute;
}
.box div {
margin: 10px;
width: 180px;
height: 50px;
background: #ccc;
}
If I had to make a guess, I would assume it has something to do with the blur effect?
Any idea how to fix this?
Also reproducible on Mac OS X / Latest Chrome.
This is a bug in Webkit that seems to be caused by combining transform:scale with filter:blur. If I remove the transform in the jsfiddle, the glitch is no longer reproducible: https://jsfiddle.net/2fr6tcgz/
If the only reason you're using scale is to hide the blurry edges of the background, you could use background-size: 105% auto; background-position: center center; as a workaround: https://jsfiddle.net/xa23ja88/ (I also fixed the position: aboslute; typo).
Update:
Apparently the above doesn't fix it completely. But this does: https://jsfiddle.net/o0mupqbo/ (switching the nesting of background image and color). Does that work in your situation?
i've just made social media icons for my website. i wanted to look them a bit more interesting, so i put overlays on them, which appears, when you moving the hover over it.
i've tried to use
#bla:hover {
background-image: overlay.png;
}
but it didn't worked. Link here: http://tdfts.com/projects/akvile_test/
I also tried this (sorry i cannot really explain :D): http://tdfts.com/projects/akvile_test/website/
But this still did not work well, and looked awful in ie and ff.
do not mind the position of the social media bar.
the overlay should have a transition.
thank you in advance
Demo ..
CSS
.social-item{
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
float: left;
margin: 5px;
}
.social-item .original{
width: 100%;
height: 100%;
}
.social-item .over{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.social-item:hover .over{
opacity: 1;
}
HTML
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>
Hope this will help you ..
According to your style above, instead of that you should use
#bla:hover {
background-image: url('overlay.png');
}
The url inside should have the correct location.
Regarding the position, you need to make the div which contain the overlay.png should be absolute. [position: absolute; top: 0;]
And make sure the parent a should be relative or absolute
You have
#fb {
height: 40px;
width: 40px;
background-image: url(img/socialmedia/fbhover.png);
}
in your style.css (line 72) thats causing the background-image to be applied automatically. Instead, you would want something like:
#fb {
height: 40px;
width: 40px;
}
#fb:hover {
background-image: url(...);
}
However, I doubt this is what you want. Setting a background-image on an <img src="foo.png"> will just show the background-image behind foo.png, and I'm guessing you want to replace the image entirely.
So you have two options:
1) Easier: Use jQuery's .hover() and .attr("") change the src of the <img> with Javascript.
2) Harder / Uglier (but doesn't require JS): Make two divs, one on top of the other. Make your default image be on the bottom and the hover one be on the top. Set the top div's opacity to 0 and then do a CSS :hover selector that changes the top div's opacity to 1. Frankly, I'd go with the first option.
You can apply some css like I did for facebook overlay
#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}
top in -25px;
use this
#overlayfb:hover {
top: -25px;
}
I think it will work for you