Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question
<span class="profile-pic-wrapper">
<a href="https://www.google.com" target="_blank">
<img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/>
<span class="profile-pic-overlay">
<span class="social-icon">View Profile</span>
</span>
</a>
</span>
Description
I am trying to use a CSS transition on a linear gradient (profile-pic-overlay) that is clipped by a border radius (profile-pic-wrapper). The desired behavior is to have a profile image when, the rounded image container is hovered over, a linear gradient fades into view indicating you can view the profile.
The issue
The gradient does not honor the bounds of the border radius. I tried this answer but when I do that, the linear gradient will not transition. #Keyframe animation doesn't help either.
Any ideas?
Edit
This appears to be an issue only with Chrome on Windows
As far I can test the problem is related to the <a> container of your gradient layer. Searching about how to solve this issue here are some properties you can add that will cover most browsers:
will-change & transform:translate3d
Add this to your code:
.profile-pic-wrapper, .profile-pic-wrapper a {
display:block;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
will-change:transform;
}
Codepen Demo
Note: Info adapted from this answer, I want to post here my answer to suit your case beacuse you need to do it on a tag and parent tag, but if you want we can close it as dup.
Related
This is a very specific issue but I'm attempting to mask an image that is blurred and place it directly over a video so that there is a gradient fade into obscuring half of the video.
What happens when all 3 of these conditions are present (Video, blur, and mask-image) is that overlaying (masking) image will start blurring into transparency at the borders of the CONTAINING div, instead of it's own borders. This means that no matter how large I make the image mask or however I move it, it will never touch and completely obscure the edges of the video.
<div id="container">
<div id="background-image-mask></div>
<video><source src=""></video>
</div>
#background-image-mask {
height:105%;
width: 105%;
background-image: url('...');
-webkit-image-mask: gradient(...);
filter:blur(5px);
}
#container {
overflow:hidden;
}
You can see a codepen here: https://codepen.io/mcheah/pen/mGEbPW
Does anyone know of a way to get around this? Some CSS property that I'm unaware of? Or another potential workaround?
Thanks so much!
If anyone needs a workaround, I simply included an additional image behind the original image, which was not blurred out.
ie:
<img src="123.jpg" class="blur-me">
<img src="123.jpg" class="normal">
This covers the edges and you can't really tell that the edges are not as blurred.
I want to fade an article's content to white to signify that further content can be unlocked. I can achieve this by adding an :after element with a white gradient.
But this techniques makes the text under the area under the gradient awkwardly unselectable and unresponsive to hover effects.
How can I produce a similar effect, and still let the user interact properly with the content underneath the gradient?
You can set pointer-events: none on :after
More info and an example: https://css-tricks.com/almanac/properties/p/pointer-events/
Here's the codepen: http://codepen.io/zakkain/pen/dseHt used in aforementioned example.
I have also added a fiddle as an example: https://jsfiddle.net/quzoqone/4/
Use this library: AnimateCSS
There's a lot of cool effects including fadeIn
I am currently trying to adjust the CSS Animation I have testing on https://www.alexcurriemedia.com/css-test/
What I need to happen is for the first image to not be on screen when the page opens, and for the last image to disappear completely off screen
Here is the html code:
<table><td><h1 class="animated slideInLeft">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="500" width="500"/>
</h1></td>
<td><h1 class="animated slideOutRight">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="100" width="500"/>
</h1></td></table>
And this link is the stylesheet for the movements:
So on load you want the image on the right to start sliding off the page, and the image on the left to start sliding in?
Your images are staying visible after they slide over because, by default, content that overflow's it's parent stays visible. Try adding overflow: hidden to .content-wrapper.
Otherwise I've misunderstood the question.
The problem is in your js fiddle, you cannot transition visibilty in keyframes, it is either visible or not visible, so theres no mid-points to 'transition' you can how-ever transition opacity or use javascript to toggle display:block; to display:none; or combine the two methods to fade out its visiblity and then remove it from the dom using js.
Also your keyframe statements should both match:
ie from: should have all the same properties & values
as 'to'.
examples:
#keyframes name{
from{filter:opacity(0) hue-rotate(0deg);}
to{filter:opacity(1) hue-rotate(288deg);}
}
#keyframes sumName{
0%{filter:opacity(0) hue-rotate(0deg);} // Note even though hue-rotate is at 0deg, it will not run if they do not match
50%{filter:opacity(0.5) hue-rotate(288deg);}
100%{filter:opacity(1) hue-rotate(24degdeg);}
}
Also:
These`should be above the keyframe declarations, symantically speaking.
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
hope some of these help.
I have a couple of divs, one inside the other, I'm using border-radius and overflow: hidden on the outer div which creates a circular mask over the inner div.
It works, however, when using backface-visibility: hidden; on the child div the border-radius is no longer applied.
Here's an example of the issue, can be seen in chrome and safari
Looks like this is a bug in webkit it's being tracked on the chromium issue track. Looks like no sign of a fix being merged any time soon.
Ok, i've tried a few things with your example. The W3schools states that "backface-visibility:hidden;" is not yet well supported. This property has to do with 3d transformations, right? Specially rotation.
I found a workaround. Apply the "backface-visibility" on the mask div, not the inner one. If you do that, you'll see that it breaks the round as well. But if you apply a rotation transform on the mask div, the rounded border appears back to normal.
So, if you really want to hide the backface without losing the radius, apply this style only after you started rotating the element. Check this out:
<p>Backface hidden:</p>
<div class="ex">
<div class="mask bfh">
<div class="bg"></div>
</div>
</div>
And the css:
.bfh {
-webkit-backface-visibility:hidden;
-webkit-transform: rotateY(30deg);
}
In #Rob linked track on chrome issue there is also a workaround that was added by user viktorli.
Simply add a transform rule on the parent element of the rogue child not respecting the overflow:hidden rule and it will be fixed! something like:
-webkit-transform: scale(1);
How can I appply gradient to the border of a div using CSS ? Any one example please. I have tried using google, but not able to do it.
the trick is to use a wrapper and had an background image to it, so it's IE7+ proof
<span class="buttonWrapper">
<input type="button" value="Submit" />
</span>
live example on JsBin
http://jsfiddle.net/nicktheandroid/b875w/1/
check out my demo, i'm in the process of trying to get the gradient to only be on the right border, not the others.