I'm using a psuedo element to fade a gradient over another div which has an image as a background for that div.
My html layout is like so:
<div class='portfolio_thumb'>
<div class='portfolio_thumb_caption'></div
</div
and my CSS for those items
.portfolio_thumb {
position: relative;
width: 100%;
height: 300px;
background-size: cover;
}
.portfolio_thumb .portfolio_thumb_caption:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
transform: translate3d(0,50%,0);
}
.portfolio_thumb:hover .portfolio_thumb_caption:before {
transform: translate3d(0,0,0);
opacity: 1;
}
Right now the gradient fades in and starts to slide, but it is shown past the parent div. I only want the gradient shown within the bounds of the portfolio_thumb div. Also, both divs in that html snippet are the same heights. Does anyone have any ideas? I'm going for this kind of approach. http://tympanus.net/Development/HoverEffectIdeas/
Thanks!
Use overflow: hidden on the container to cut-off the gradient.
Use transform: translateY(x%) to move the gradient up and down. As we are not creating 3d animations, there is no point using translate3d, which requires more grunt to run.
The transition smoothly shows and hides the overlay
Complete Example
.portfolio_thumb {
position: relative;
background: url(http://lorempixel.com/output/animals-q-c-640-300-1.jpg);
background-size: cover;
overflow: hidden;
height: 300px;
width: 100%;
max-width: 840px;
margin: 0 auto;
}
.portfolio_thumb .portfolio_thumb_caption:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
content: '';
transition: all 0.5s;
transform: translateY(50%);
opacity: 0;
}
.portfolio_thumb:hover .portfolio_thumb_caption:before {
transform: translateY(0);
opacity: 1;
}
<div class='portfolio_thumb'>
<div class='portfolio_thumb_caption'></div>
</div>
Related
I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS
I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.
How can I solve the issue there with my transition looks smooth?
I created a JSFiddle to display what I mean:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: #fff;
font: 300 2rem 'Montserrat';
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
top: -15px;
left: -15px;
background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
background-repeat: repeat;
border-radius: 5px;
background-size: 600%;
animation: border 12s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: 0% 0%;
}
100% {
background-position: 250% 250%;
}
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div class="box">
Greetings fellow developer!
</div>
Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.
Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.
body {
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
inset: -15px;
background:
repeating-linear-gradient(45deg,
#0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
#00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
border-radius: 5px;
background-size: 200% 200%;
animation: border 2s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: bottom left;
}
100% {
background-position: top right;
}
}
<div class="box">
</div>
Hi there I'm trying to build the current design
I used the skew transform but the whole div skewed not on border
tried using clip-path but I cant use border radius with it
any ideas?
As the outline is just visual rather than having meaning we can add it without adding extra elements in the DOM. We can do this with CSS pseudo elements which paint the border - the top one being skewed, the bottom one not.
Essentially this snippet is using a combination of your two methods - skew and clip-path - to give this:
.container {
background-color: pink;
display: inline-block;
padding: 2vmin;
}
.container>* {
width: 20vmin;
height: 10vmin;
position: relative;
}
.container>*::before,
.container>*::after {
content: '';
top: 0;
left: 0;
border: 1px red solid;
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
}
.container>*::before {
transform: skew(0, -5deg);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
}
.container>*::after {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
<div class="container">
<div></div>
</div>
Try having another div as the container of your div, then use the skew transform on that. If that still skews the inner div, you can try having another div that has position: absolute; and position it over your div, then skweing it. It will have to be transparent.
Try this:
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
<div>slanted div</div>
And then just reverse it
I'm having some problems I'm trying to have two clip path polygons overlap each other when hovered over by the mouse, I'm using z-index's and trying to change them depending on with overlay is being hovered over but I can't seem to get it to work. I've tried changing the z-index when the object is hovered over but that doesn't seem to change anything.
.banner {
position:relative;
bottom 0;
top: 0;
left:0;
right: 0;
width: 100%;
height: 700px;
}
.overlayleft {
position:absolute;
z-index:1;
bottom 0;
top: 0;
left:0;
right: 0;
width: 50%;
height: 100%;
overflow:hidden;
clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
background: rgba(0,0,0,1);
transition: .5s ease;
}
.overlayright {
position:absolute;
z-index:2;
bottom: 0;
top 0;
left: 50%;
right: 0;
width: 50%;
height: 100%;
overflow:hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
background: rgba(0,0,0,0.6);
transition: .5s ease;
}
.overlayleft:hover{
z-index: 4;
width: 100%;
}
.overlayright:hover{
z-index: 4;
width: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<body>
<div class="banner">
<div class="overlayright"></div>
<div class="overlayleft"></div>
</div>
</body>
</html>
Its because of this "background: rgba(0,0,0,0.6);"
Its color with opacity, if you change the color to something else, lets say red color, you will see the difference.
Basically left div is black, and the second div is gray, when gray one is hovered its not visible that it is hovering the left one because of its opacity...
I found this code on https://thecodeplayer.com/index.php/walkthrough/3d-thumbnail-image-hover-effect and I want to make the image both responsive and whenever I change an image, the image has to scale to the div.
I tried to set: width: 100%; and height: auto; but it did not work. Is it because the HTML does not contain <img> tags? As I'm trying to learn I would appreciate any advice you have for me on how to solve this.
/*custom font - Montserrat*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
background: #544; /*fallback*/
background: linear-gradient(#544, #565);
}
/*Thumbnail Background*/
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
/*double layered BG for lighting effect*/
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("http://thecodeplayer.com/u/m/i1.png");
/*disabling the translucent black bg on the main image*/
background-size: 0, cover;
/*3d space for children*/
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
/*36px high element positioned at the bottom of the image*/
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
/*inherit the main BG*/
background: inherit; background-size: cover, cover;
/*draw the BG bottom up*/
background-position: bottom;
/*rotate the surface 90deg on the bottom axis*/
transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
/*the rotation is a bit less than the bottom surface to avoid flickering*/
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
/*shadow*/
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
/*pushing the shadow down and scaling it down to size*/
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<!-- Container -->
<div class="thumb">
<!-- Image -->
<a href="#">
<!-- Label -->
<span>Three-eyed Robot</span>
</a>
</div>
I am using border-image with gradient and it works fine, but it seems transition is not supported for it.
Is it possible to achieve transition on hover for this example?
JsFiddle
div {
border:10px solid blue;
height:120px;
float:left;
transition:1s all;
border-image: linear-gradient(to bottom, white, blue) 1 100%;
}
div:hover {
border-image: linear-gradient(to bottom, skyblue, blue) 1 100%;
}
<div></div>
As the others already told you, it isn't possible to transition a gradient (yet). The best way to fake the effect would be to work with opacity, which can be transitioned. You don't need to add any elements however, the :before and :after pseudo elements will do just fine. have a look at the following css:
div {
height:120px;
width:10px;
padding: 0 10px;
background: salmon;
background-clip: content-box;
position: relative;
}
div:after, div:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content:'';
}
div:after {
background: linear-gradient(to bottom, white 0%, blue 100%);
z-index: -1;
transition: opacity 1s;
}
div:before {
background: linear-gradient(to bottom, skyblue 0%, blue 100%);
z-index: -2;
}
div:hover:after {
opacity: 0;
}
And an example: https://jsfiddle.net/et0ffrqx/2/
Not Possible
That isn't possible yet because linear-gradient is calculated as an image, not actually colors.
Solution
Try putting the <div> within another <div> which can act as a border. Then the outer <div> can have an animated background
I've found this codepen demonstrating how this can be done with JavaScript.
My best bet for you would be to have two <div> stacked on top of each other. The bottom <div> would be the target gradient and the top being the start. Then just fade the top <div>
#start {
position:absolute;
width: 100px;
height: 100px;
z-index: 1;
opacity: 1;
background: linear-gradient(red,blue);
transition: opacity 0.5s ease;
}
#end {
position:absolute;
width: 100px;
height: 100px;
background: linear-gradient(green,orange);
z-index: -1;
}
#start:hover {
opacity: 0;
}
<div id="start">Start</div>
<div id="end">End</div>
The snippet demonstrates a simple way to fade between gradients. Not perfect but smoother and without JavaScript. Put your other stuff in side the <div> and adjust the width and height to your needs.
Also try using :before and :after to avoid having duplicate divs
No
Animations aren't supported for those properties.
You can however, think of another way to accomplish this visually.
maybe you have 2 wrappers around something, and they are 2 different gradients, and there is padding around them to simulate the look of a border... and then the elements with the gradients have opacity that fades to and from on hover.
https://jsfiddle.net/sheriffderek/5uoypaoo/
<div class="gradient-1">
<div class="gradient-2"></div>
<div class="thing"></div>
</div>
.thing {
position: relative;
width: 200px;
height: 200px;
background: white;
float: left;
}
.gradient-1 {
position: relative;
background: linear-gradient(45deg, pink, blue);
opacity: 1;
padding: 1rem;
float: left;
}
.gradient-1:hover .gradient-2 {
opacity: 1;
}
.gradient-2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(45deg, lightgreen, orange);
opacity: 0;
transition: opacity 1s ease-in-out;
}