Im having a problem with a :before element (a left pointing triangle) getting a small line through the middle of it when I transform: scale on :hover I'm not sure what is causing this.. I have seen the same effect on other websites and it doesn't happen.
Any help would be appreciated
.container{
display: flex;
height: 45vw;
width: 100%;
background: black;
}
.image{
background: blue;
width: 50%;
height: 100%
}
.text{
background: yellow;
width: 50%;
height: 100%
}
.text:before{
content: '';
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: 50%;
left: -17px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid yellow;
}
.text:hover{
transform: scale(1.1);
transition: 0.4s;
}
<div class="container">
<div class="image">
</div>
<div class="text">
</div>
</div>
view on jsFiddle: https://jsfiddle.net/wap184pe/1/
This workaround essentially makes a triangle twice the size of the triangle you have and hides half of it, so the thin border is not visible. Check out this related issue with rendering triangles as borders in Firefox.
.container{
display: flex;
height: 45vw;
width: 100%;
background: black;
}
.image{
background: blue;
width: 50%;
height: 100%
}
.text{
background: yellow;
width: 50%;
height: 100%
}
.text:before{
content: '';
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: 35%;
height: 0;
width: 0;
border: 36px solid transparent;
border-right: 0;
border-top-color: yellow;
transform: rotate(225deg);
}
.text:hover{
transform: scale(1.1);
transition: 0.4s;
}
<div class="container">
<div class="image">
</div>
<div class="text">
</div>
</div>
If you use the arrow at generator at http://www.cssarrowplease.com, you can save yourself the trouble
Related
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
I have tried achieving this effect using border-radius (code below) but I want the circle to be smaller, as shown in this example https://imgur.com/a/gKHtVXr and I don't think I can acheive this with border-radius.
<img class = "zyra-thumb" src = "thumbnail champion/thumb2.png" alt="zyra">
CSS:
.zyra-thumb{
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 150px;
transition: border-radius 0.3s;
}
.zyra-thumb:hover{
border-radius: 10px;
}
you can use clip-path to display only center of the thumb image and
transition: clip-path 1s;to give needed animation on hover
.thumb {
background: purple;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.zyra-thumb {
width: 100%;
object-fit: cover;
clip-path: circle(25% at 50% 50%);
transition: clip-path 1s;
border-radius: 10px;
}
.zyra-thumb:hover {
clip-path: circle(100% at 50% 50%);;
}
<div class="thumb">
<img class="zyra-thumb" src="https://www.gravatar.com/avatar/0cf65651ae9a3ba2858ef0d0a7dbf900?s=256&d=identicon&r=PG&f=1" alt="zyra">
</div>
Based on your attached image I assume this is the effect you are trying to achieve.
.zyra-thumb {
background: url(https://i.stack.imgur.com/OR7ho.jpg) no-repeat center;
background-size: cover;
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
display: inline-block;
border-radius: 20px;
}
.zyra-thumb::before {
content: "";
display: block;
width: 50%;
padding-bottom: 50%;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%);
border: solid 400px #41373f;
border-radius: 50%;
transition: all ease-in-out 0.3s;
}
.zyra-thumb:hover::before {
width: 150%;
padding-bottom: 150%;
}
<div class="zyra-thumb">
</div>
Simply use border-radius:0px; in hover.
I have two div's next to each other but I cannot seem to get float: left to work properly and achieve what I want. Every time, the left div will still cut into/overlap onto the right div like so (This the dynamic version of my code with some jQuery code which changes the size of the divs based on user input): https://gyazo.com/b373205412f4ba18f32dad0f3cf877d2
Here is the static version of my code where I change the width/height manually. As you can see I have float: left on div5brother, but div5 still overlaps onto it. jsFiddle: https://jsfiddle.net/Kaevonz/92etqaxk/10/
This is what I am trying to recreate:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 205px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 290px;
height: 290px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 280px;
height: 280px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div3 > span {
transform: translate(-10%, -55%) rotate(-45deg);
font-size: 11px;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5container {
width: 205px;
height: 50px;
position: absolute;
top: 0;
}
.div5 {
border: 0.5px dashed black;
width: 235px;
height: 50px;
top: 0;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.div5brother {
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
}
.div5brother > span {
font-size: 9px;
line-height: 50px;
display: block;
position: absolute;
right: -40px;
text-transform: uppercase;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3"><span>Pipe O.D.</span>
<div class="div5container">
<div class="elem div5">
</div>
<div class="elem div5brother">
<span>Min. Cutter Travel</span>
</div>
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
As far as I can see the overlapping is due to you making the div5 element 30px wider than its container. I changed its width from width: 235px; to width: 205px; and the overlapping is gone and it seems to match the image. Here is a JSFiddle with my changes.
I need to scale the middle div using transform scale(1.3). It works of course but the problem is that after scaling it overlaps neighbor divs. Is it possible to get rid of overlap using just CSS?
This is how it is now looks like:
But I want it this way
.main {
width: 100%;
height: 500px;
background-color: gray;
padding: 100px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 2px;
display: inline-block;
border: 2px;
border-style: solid;
border-color: black;
}
.scaled-box {
width: 100px;
height: 100px;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
display: inline-block;
background-color: green;
opacity: 0.7;
}
<div class="main">
<div class="box"></div>
<div class="scaled-box"></div>
<div class="box"></div>
</div>
.main {
width: 100%;
height: 500px;
background-color: gray;
padding: 100px;
--scale-rate:1.5; /* You can change scale from this line */
}
.box {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
border: 2px;
border-style: solid;
border-color: black;
}
.box:first-child{
margin-right: calc(((100px * var(--scale-rate)) - 100px) / 2); /* 100px is scaled-box width*/
}
.box:last-child{
margin-left: calc(((100px * var(--scale-rate)) - 100px) / 2); /* 100px is scaled-box width*/
}
.scaled-box {
width: 100px;
height: 100px;
-webkit-transform: scale(var(--scale-rate));
-moz-transform: scale(var(--scale-rate));
transform: scale(var(--scale-rate));
display: inline-block;
background-color: green;
opacity: 0.7;
}
<div class="main">
<div class="box"></div>
<div class="scaled-box"></div>
<div class="box"></div>
</div>
Edited:
margin-rate fixed
transform property does not reflects to the element width or height. Maybe you can use zoom instead. The downside is that Firefox does not support it: https://caniuse.com/?search=zoom
You can add a margin to the scaled box to prevent the overlap.
.scaled-box {
margin: 20px;
width: 100px;
height: 100px;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
display: inline-block;
background-color: green;
opacity: 0.7;
}
In your preview, the divs are also aligned vertically which can't happen with a simple margin since they're inline. Use a flex in the main container to align them vertically.
.main {
display: flex;
align-items: center;
width: 100%;
height: 500px;
background-color: gray;
padding: 100px;
}
I try to make a menu on the side of my website which rolls out when hovered on it. First I had its width expand but the text would look weird so I figured I would use CSS animation to change the position of the div such that it would move to the right. The problem I get is that those menu divs overlay the 'main' div. The only way to get these divs under the main div is to use z-index: -1 but then :hover doesn't work anymore. I have tried pointer-events: none; but that also doens't seem to work.
<div id="container">
<div id="header">
<img id="mainpic" src="pokebalicon.png" />
</div>
<div class="sidediv" id="first">
<p>Homepage</p>
</div>
<div id="mainpage">
text
</div>
</div>
And the CSS
#container {
width: 820px;
height: 700px;
margin: 100px auto;
position: relative;
}
#header {
padding: 10px;
height: 100px;
width: 100%;
background-color: transparent;
overflow: hidden;
}
#mainpage {
height: 600px;
width: 100%;
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
border: 1px solid #D5D4D4;
pointer-events: none;
}
.sidediv{
position: absolute;
left: 721px;
height: 40px;
width: 170px;
text-align: center;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 0 5px 5px 0;
z-index: -1;
}
.sidediv:hover starts an animation which changes left such that it looks like it's being pulled out. But sadly nothing happens when hovering over a sidediv. Any idea how to solve this?
The hovering looks like this:
.sidediv:hover{
-webkit-animation: example 0.5s forwards;
animation: example 0.5s forwards;
}
#-webkit-keyframes example {
100% {left: 841px;}
}
#keyframes example {
100% {left: 841px;}
}
Try this
#container {
width: 820px;
height: 700px;
margin: 100px auto;
position: relative;
}
#header {
padding: 10px;
height: 100px;
width: 100%;
background-color: transparent;
overflow: hidden;
}
#mainpage {
height: 600px;
width: 100%;
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
border: 1px solid #D5D4D4;
}
.sidediv {
position: absolute;
left: 721px;
top: 80px;
height: 40px;
width: 170px;
text-align: center;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 0 5px 5px 0;
z-index: -1;
transition: 0.7s
}
#container #mainpage:hover + .sidediv {
z-index: 1;
background: pink;
left: 0px
}
<div id="container">
<div id="header">
<img id="mainpic" src="http://i.imgur.com/IMiabf0.jpg" />
</div>
<div id="mainpage">
text
</div>
<div class="sidediv" id="first">
<p>Homepage</p>
</div>
</div>