I have an issue with a transition effect in Safari and could use some help. My CSS hover swaps background images, as it should, but the hover image 'jumps' from its position, up and to the left (which I don't want to happen). Thanks.
Structure:
.sidebar .widget {
height: 276px;
width: 326px;
background:url('/wp-content/themes/a-theme/svg/polygon-image.svg') no-repeat center center;
background-size: 100%;
}
.sidebar .widget:hover {
background:url('/wp-content/themes/a-theme/svg/polygon-image-hover.svg') no-repeat center center;
background-size: 100%;
transition: 0.5s ease-in-out;
}
<div class="sidebar">
<aside id="black-studio-tinymce-18" class="widget widget_black_studio_tinymce">
<div class="textwidget">
<h3 style="text-align: center;">Sample Text<br></h3>
</div>
</aside>
</div>
avoid browsers bugs and clean:
.sidebar .widget {
height: 276px;
width: 326px;
background-repeat:no-repeat;
background-position: center center;
background-image:url(/wp-content/themes/a-theme/svg/polygon-image.svg);
background-size: 100%;
transition:background-image 0.5s ease-in-out;
}
.sidebar .widget:hover {
background-image:url(/wp-content/themes/a-theme/svg/polygon-image-hover.svg);
}
From your help, I modified my CSS to get exactly what I needed. I had a background image of a polygon shape and a graphic in the middle of it. I kept the graphic and used a CSS polygon for the shape, instead, and now my hover effect works in Firefox, Chrome, and Safari.
See my CSS below and thanks again for the replies.
sidebar .widget {
background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center;
background-color: rgba(255, 165, 0, 0.85);
background-size: 70%;
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
height: 276px;
width: 326px;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar .widget:hover {
background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center;
background-color: rgba(108, 218, 244, 0.8);
background-size: 80%;
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
height: 276px;
width: 326px;
transition: 0.5s ease-in-out;
}
Related
I have two boxes, each have :hover selector which transition linear-gradient background image.
linear gradient to top works perfectly fine with transition (code below).
.box7:hover{
color: #FFF;
background-image: linear-gradient(to top, #000 50%, #fff 50%);
background-position: 0% 100%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
but I am having problems with linear gradient to bottom, transition effect doesn't seems to work (code below).
.box2:hover{
color: #FFF;
background-image: linear-gradient(to bottom, #000 50%, #fff 50%);
background-position: 100% 0%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
Any help would be appreciated.
Below is the link to check (hover on all boxes)
https://conrad93.github.io/linear-gradient-sliding-effect/boxbox.html
The problem is that your styles are not applied when you aren't hovering over the element. The solution is therefore to apply these styles to the default state of the element as well. Something like this:
// html
<div class="container">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
</div>
// CSS
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: solid 1px red;
margin: 5px;
transition: all .4s ease;
background-color: lightgoldenrodyellow;
}
.box-1 {
background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 0%;
background-size: 100% 200%;
}
.box-1:hover {
background-position: 0% 100%;
}
.box-2 {
background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 100% 200%;
}
.box-2:hover {
background-position: 0% -200%;
}
.box-3 {
background-color: crimson;
background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-3:hover {
background-position: 0% -100%;
}
.box-4 {
background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-4:hover {
background-position: 0% 100%;
}
Within the declaration block for the hover state, you only need to declare those properties that are changing, in this case background-position.
Here is a working example on JsFiddle.
You probably also want the diagonal gradient to animate up from the bottom left of the element. This is a little tricky to do, but you can see it working in the example. To understand why it works, you need to understand what the x and y values in the background-position property mean. MDN docs are a good place to learn.
I'm trying to create an animated background fill effect (still learning animation) but the fill color jumps quickly before it reaches the end of the div. What's the issue and how to fix it? Thanks in advance.
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
animation: makeItfadeIn 3s 1s;
animation-fill-mode:forwards;
}
#-webkit-keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
#keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
<div class="outer">
<div class="button">
</div>
</div>
Background inside the animation is the culprit. You simply need to animate the position from right to left:
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 0);
background-size: 200% 100%;
background-position: right;
animation: makeItfadeIn 3s 1s forwards;
}
#keyframes makeItfadeIn {
100% {
background-position: left;
}
}
<div class="outer">
<div class="button">
</div>
</div>
Related to get more details: Using percentage values with background-position on a linear-gradient
I'm trying to accomplish the following in CSS:
So you start with 2 halves, each of them showing half a picture of someones face (these images have their face in the exact center). By some mean of interaction the sides pan out. This is what I tried first:
.container {
display: flex;
align-items: stretch;
width: 414px;
height: 736px;
}
.container__section {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
padding: 1rem;
}
.container__section:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
}
.container__section--left {
background-color: #83b1be;
}
.container__section--left:before {
background: url('http://i68.tinypic.com/2mwzddh.jpg') no-repeat;
background-position: left 50% center;
transform: translateX(0%);
left: 0;
right: 50%;
}
.container__section--right {
background-color: #80bb94;
}
.container__section--right:before {
background: url('http://i68.tinypic.com/2s7gcav.jpg') no-repeat;
background-position: right 50% center;
transform: translateX(0%);
right: 0;
left: 50%;
}
<div class="container">
<div class="container__section container__section--left">
<p class="homepage__section-detail">
lorem ipsum
</p>
</div>
<div class="container__section container__section--right">
<p class="container__section-detail">
lorem ipsum
</p>
</div>
</div>
It also seems that the images aren't loaded/blocked within the code snippet here above. If someone knows how to use images?
I'd probably layer the images in a single div (in this case using CSS-Grid) but you could use positioning...
Then use a clip-path to clip one in half. This property is animatable too.
.image-wrap {
width: 300px;
margin: 1em auto;
border: 1px solid grey;
display: grid;
overflow: hidden;
}
.image-wrap div {
grid-row: 1/2;
grid-column: 1/2;
}
img {
display: block;
max-width: auto;
height: 100%;
}
.one {
transition: -webkit-clip-path .5s ease;
transition: clip-path .5s ease;
transition: clip-path .5s ease, -webkit-clip-path .5s ease;
-webkit-clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}
.image-wrap:hover .one {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
<div class="image-wrap">
<div class="one"><img src="https://www.placecage.com/300/200" alt=""></div>
<div class="two">
<img src="http://www.fillmurray.com/300/200" alt="">
</div>
</div>
I am trying to apply clip-path on three items which are aligned next to each other. Since paths are calculating the space between each other based on the non-clipped div shape, there is an unwanted gap. In the code below when I apply the commented styles in .class2 I get a close result of what I want, but then it's no longer responsive. Any other way to get the similar result with a more suitable approach ?
https://codepen.io/SpoyrazY/pen/erbKXx
HTML
<div class="class1">
<h1>1</h1>
</div>
<div class="class2">
<h1>2</h1>
</div>
<div class="class3">
<h1>3</h1>
</div>
CSS
.class1{
background-image:url(https://dummyimage.com/600x400/66ccff/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
text-align: center;
color: white;
}
.class2{
background-image:url(https://dummyimage.com/600x400/66ff66/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0%, 100%);
clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
/*
margin-left: -90px;
margin-right: -90px;
width: 42.7%;
-webkit-clip-path: polygon(12% 0, 100% 0%, 85% 100%, 0%, 100%);
clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
*/
text-align: center;
color: white;
}
.class3{
background-image:url(https://dummyimage.com/600x400/ff99ff/fff&text=+);
width: 33.33333333%;
height: 400px;
float: left;
-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
text-align: center;
color: white;
}
This happens due to clip-path. you can achieve your result by setting scale in a custom class. so your html will be like this
<div class="class1 block">
<h1>1</h1>
</div>
<div class="class2 block">
<h1>2</h1>
</div>
<div class="class3 block">
<h1>3</h1>
</div>
Add some lines of css
.block {
transform: scale(1.35);
transform-origin: top;
}
working fiddle here
I'm trying to build a frame. I did the top edge properly, but when doing the left edge it doesn't output properly. The left edge is almost correct, I just need to flip it horizontally from its current position.
Could you flip it for me and provide me a working example on your answer (snippet preview) or JSFiddle?
.trapezoid-top {
width: 400px;
height: 100px;
background-image: url('https://image.ibb.co/e5Kaw7/image.png');
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top left;
transform: rotate(0deg);
}
.trapezoid-left {
width: 600px;
height: 100px;
margin-top: -100px;
background-image: url('https://image.ibb.co/e5Kaw7/image.png');
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top left;
transform: rotate(90deg);
}
<div style="margin:0 100px;">
<div class="trapezoid-top"></div>
<div class="trapezoid-left"></div>
</div>
Thanks!
Try this:
CSS:
.container {
position: relative;
margin: 0 100px;
}
.trapezoid-top {
width: 400px;
height: 100px;
background-image: url('https://image.ibb.co/e5Kaw7/image.png');
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top left;
transform: rotate(0deg);
}
.trapezoid-left {
width: 600px;
height: 100px;
margin-top: -100px;
background-image: url(https://image.ibb.co/e5Kaw7/image.png);
background-size: contain;
clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 100px 100%);
transform-origin: top right;
transform: rotate(-90deg);
position: absolute;
right: calc(100% - 16px);
}
HTML:
<div class="container">
<div class="trapezoid-top"></div>
<div class="trapezoid-left"></div>
</div>
Change transform-origin to top right and position the element to place it on left.
Demo: http://jsfiddle.net/GCu2D/3568/